Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Button

Usage notes

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

Default

Toggle markup


        <button is="coral-button">Default</button>

Quiet

Toggle markup


        <button is="coral-button" variant="quiet">Quiet</button>

CTA

Toggle markup


        <button is="coral-button" variant="cta" style="max-width:168px">Informationen über Creative Cloud</button>

Secondary

Toggle markup


        <button is="coral-button" variant="secondary">Secondary</button>

Quiet Secondary

Toggle markup


        <button is="coral-button" variant="quietsecondary">Quiet Secondary</button>

Warning

Toggle markup


        <button is="coral-button" variant="warning">Warning</button>

Quiet Warning

Toggle markup


        <button is="coral-button" variant="quietwarning">Quiet Warning</button>

Over Background button

Toggle markup


        <div class="u-coral-padding" style="background-color: rgb(15, 121, 125); display: inline-block;">
          <button is="coral-button" variant="overbackground">Over Background</button>
        </div>

Action button

Toggle markup


        <button is="coral-button" variant="action">Action</button>
        <button is="coral-button" variant="action" icon="edit">Action with icon</button>
        <button is="coral-button" variant="action" selected="">Selected Action</button>

Quiet Action button

Toggle markup


        <button is="coral-button" variant="quietaction">Quiet Action</button>
        <button is="coral-button" variant="quietaction" icon="edit">Quiet Action with icon</button>
        <button is="coral-button" variant="quietaction" selected="">Selected Quiet Action</button>

Minimal button

Toggle markup


        <button is="coral-button" variant="minimal">Minimal</button>

Disabled button

Toggle markup


        <button is="coral-button" disabled="">Disabled</button>

Icon button

Toggle markup


        <button is="coral-button" aria-label="home" icon="home"> </button>
        <button is="coral-button" icon="home" iconposition="left">With Icon</button>
        <button is="coral-button" icon="home" iconposition="right">With Icon</button>

Image button

Toggle markup


        <button is="coral-button" aria-label="placeholder" icon="http://via.placeholder.com/64x64"> </button>
        <button is="coral-button" icon="http://via.placeholder.com/64x64" iconposition="left">With Image</button>
        <button is="coral-button" icon="http://via.placeholder.com/64x64" iconposition="right">With Image</button>

Block button

Toggle markup



        <button is="coral-button" block="" style="max-width:400px">Block Button</button>