To use the button component import the component in your JavaScript.

import '@cds/core/button/register.js';

Form

Name

submit

       <form cds-layout="vertical gap:md" @submit="${(e: Event) => {
        e.preventDefault();
        action('submit')(e);
      }}">
    <div cds-layout="vertical gap:sm">
        <label for="name" cds-text="caption">Name</label>
        <input id="name" />
    </div>
    <cds-button type="submit">submit</cds-button>
</form>
      

Actions

solid outline flat

       <div cds-layout="horizontal gap:sm">
    <cds-button>solid</cds-button>
    <cds-button action="outline">outline</cds-button>
    <cds-button action="flat">flat</cds-button>
</div>
      

Status

primary success danger neutral disabled

inverse

       <div cds-layout="horizontal gap:sm">
    <cds-button>primary</cds-button>
    <cds-button status="success">success</cds-button>
    <cds-button status="danger">danger</cds-button>
    <cds-button status="neutral">neutral</cds-button>
    <cds-button disabled>disabled</cds-button>
    <div style="background: var(--cds-global-typography-color-500)" cds-layout="p:sm">
        <cds-button status="inverse">inverse</cds-button>
    </div>
</div>
      

StatusOutline

primary success danger neutral disabled

       <div cds-layout="horizontal gap:sm">
    <cds-button action="outline">primary</cds-button>
    <cds-button action="outline" status="success">success</cds-button>
    <cds-button action="outline" status="danger">danger</cds-button>
    <cds-button action="outline" status="neutral">neutral</cds-button>
    <cds-button action="outline" disabled>disabled</cds-button>
</div>
      

IconWithText

user account user account user account

user account user account user account

new window download

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal gap:sm">
        <cds-button>
            <cds-icon shape="user"></cds-icon>user account
        </cds-button>
        <cds-button action="outline">
            <cds-icon shape="user"></cds-icon>user account
        </cds-button>
        <cds-button action="flat">
            <cds-icon shape="user"></cds-icon>user account
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button size="sm">
            <cds-icon shape="user"></cds-icon>user account
        </cds-button>
        <cds-button size="sm" action="outline">
            <cds-icon shape="user"></cds-icon>user account
        </cds-button>
        <cds-button size="sm" action="flat">
            <cds-icon shape="user"></cds-icon>user account
        </cds-button>
    </div>
    <div>
        <cds-button>new window <cds-icon shape="pop-out"></cds-icon>
        </cds-button>
        <cds-button action="outline">download<cds-icon shape="download-cloud"></cds-icon>
        </cds-button>
    </div>
</div>
      

IconWithTextAndBadge

click 10 click 10 click 10

click 10 click 10 click 10

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal gap:sm">
        <cds-button>
            <cds-icon shape="user"></cds-icon> click <cds-badge color="blue">10</cds-badge>
        </cds-button>
        <cds-button action="outline">
            <cds-icon shape="user"></cds-icon> click <cds-badge color="blue">10</cds-badge>
        </cds-button>
        <cds-button action="flat">
            <cds-icon shape="user"></cds-icon> click <cds-badge color="blue">10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button size="sm">
            <cds-icon shape="user"></cds-icon> click <cds-badge color="blue">10</cds-badge>
        </cds-button>
        <cds-button size="sm" action="outline">
            <cds-icon shape="user"></cds-icon> click <cds-badge color="blue">10</cds-badge>
        </cds-button>
        <cds-button size="sm" action="flat">
            <cds-icon shape="user"></cds-icon> click <cds-badge color="blue">10</cds-badge>
        </cds-button>
    </div>
</div>
      

TextAndBadge

Click Me 10 Click Me 10 Click Me 10

Click Me 10 Click Me 10

Click Me 10 Click Me 10

Click Me 10 Click Me 10

Click Me 10

Click Me 10 Click Me 10 Click Me 10

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal gap:sm">
        <cds-button>Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="outline">Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="flat">Click Me <cds-badge>10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button status="danger">Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button status="danger" action="outline">Click Me <cds-badge>10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button status="success">Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button status="success" action="outline">Click Me <cds-badge>10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button status="neutral">Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button status="neutral" action="outline">Click Me <cds-badge>10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm p:xs p-b:none" style="background: #313131">
        <cds-button status="inverse">Click Me <cds-badge>10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button size="sm">Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button size="sm" action="outline">Click Me <cds-badge>10</cds-badge>
        </cds-button>
        <cds-button size="sm" action="flat">Click Me <cds-badge>10</cds-badge>
        </cds-button>
    </div>
</div>
      

Links

button link this is a long link small link
link this is a long link small link

       <div cds-layout="horizontal gap:sm">
    <cds-button>
        button
    </cds-button>

    <a href="javascript:void(0)">
        <cds-button>link</cds-button>
    </a>

    <a href="javascript:void(0)">
        <cds-button>this is a long link</cds-button>
    </a>

    <a href="javascript:void(0)">
        <cds-button size="sm">small link</cds-button>
    </a>

    <br />
    <a href="javascript:void(0)">
        <cds-button action="outline">link</cds-button>
    </a>

    <a href="javascript:void(0)">
        <cds-button action="outline">this is a long link</cds-button>
    </a>

    <a href="javascript:void(0)">
        <cds-button action="outline" size="sm">small link</cds-button>
    </a>
</div>
      

Sizes

Default ('md') Default ('md')

Compact ('sm') Compact ('sm')

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal align-items:left gap:sm">
        <cds-button>Default ('md')</cds-button>
        <cds-button action="outline">Default ('md')</cds-button>
    </div>
    <div cds-layout="horizontal align-items:left gap:sm">
        <cds-button size="sm">Compact ('sm')</cds-button>
        <cds-button action="outline" size="sm">Compact ('sm')</cds-button>
    </div>
</div>
      

Block

Default ('md') Default ('md') Compact ('sm') Compact ('sm')

       <div cds-layout="vertical gap:sm">
    <cds-button block>Default ('md')</cds-button>
    <cds-button block action="outline">Default ('md')</cds-button>
    <cds-button block size="sm">Compact ('sm')</cds-button>
    <cds-button block action="outline" size="sm">Compact ('sm')</cds-button>
</div>
      

Loading

default default default default

default default default default

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal gap:sm align-items:bottom">
        <cds-button loading-state="default">default</cds-button>
        <cds-button loading-state="loading">default</cds-button>
        <cds-button loading-state="success">default</cds-button>
        <cds-button loading-state="error">default</cds-button>
    </div>
    <div cds-layout="horizontal gap:sm align-items:bottom">
        <cds-button size="sm" loading-state="default">default</cds-button>
        <cds-button size="sm" loading-state="loading">default</cds-button>
        <cds-button size="sm" loading-state="success">default</cds-button>
        <cds-button size="sm" loading-state="error">default</cds-button>
    </div>
</div>
      

DarkTheme

primary10 success10 danger10 neutral10 disabled10

primary10 success10 danger10 neutral10 disabled10 flat10

       <div cds-layout="vertical gap:sm" cds-theme="dark">
    <div cds-layout="horizontal gap:sm">
        <cds-button>
            <cds-icon shape="user"></cds-icon>primary<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button status="success">
            <cds-icon shape="user"></cds-icon>success<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button status="danger">
            <cds-icon shape="user"></cds-icon>danger<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button status="neutral">
            <cds-icon shape="user"></cds-icon>neutral<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button disabled>
            <cds-icon shape="user"></cds-icon>disabled<cds-badge>10</cds-badge>
        </cds-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-button action="outline">
            <cds-icon shape="user"></cds-icon>primary<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="outline" status="success">
            <cds-icon shape="user"></cds-icon>success<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="outline" status="danger">
            <cds-icon shape="user"></cds-icon>danger<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="outline" status="neutral">
            <cds-icon shape="user"></cds-icon>neutral<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="outline" disabled>
            <cds-icon shape="user"></cds-icon>disabled<cds-badge>10</cds-badge>
        </cds-button>
        <cds-button action="flat">
            <cds-icon shape="user"></cds-icon>flat<cds-badge>10</cds-badge>
        </cds-button>
    </div>
</div>
      

CustomStyles

button

       <style>
    .btn-branding {
        --background: #a447bb;
        --border-color: #74178b;
        --border-width: 0.15rem;
        --border-radius: 0.4rem;
        --text-transform: capitalize;
        --padding-vertical: 0.9rem;
        --padding-horizontal: 1rem;
        --font-size: 0.9rem;
        --font-weight: bolder;
        --font-family: 'Courier New', monospace;
        --height: 2.4rem;
    }

    .btn-branding:hover {
        --background: #74178b;
    }

    .btn-branding:active {
        --border-color: #44005b;
        --box-shadow-color: #44005b;
    }
</style>
<cds-button class="btn-branding">button</cds-button>