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

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

Actions

       <div cds-layout="horizontal gap:sm">
    <cds-icon-button>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

Status

       <div cds-layout="horizontal gap:sm">
    <cds-icon-button>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="success">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="danger">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button status="danger" disabled>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

StatusOutline

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

Sizes

Default ('md')

Compact ('sm')

       <div cds-layout="vertical gap:md">
    <div cds-layout="horizontal align-items:left gap:sm">
        <div cds-layout="p-r:sm align:vertical-center"><span cds-text="subsection">Default ('md')</span></div>
        <cds-icon-button>
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </div>
    <div cds-layout="horizontal align-items:left gap:sm">
        <div cds-layout="p-r:sm align:vertical-center"><span cds-text="subsection">Compact ('sm')</span></div>
        <cds-icon-button size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline" size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </div>
</div>
      

Block

       <div cds-layout="vertical gap:sm">
    <cds-icon-button block>
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button block action="outline">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button block size="sm">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button block action="outline" size="sm">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

Links

       <div cds-layout="horizontal gap:xs">
    <a href="javascript:void(0)">
        <cds-icon-button>
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
    <a href="javascript:void(0)">
        <cds-icon-button action="outline">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
    <a href="javascript:void(0)">
        <cds-icon-button size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
    <a href="javascript:void(0)">
        <cds-icon-button action="outline" size="sm">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </a>
</div>
      

Loading

       <div cds-layout="horizontal gap:sm align-items:bottom">
    <cds-icon-button loading-state="loading">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button action="outline" loading-state="loading">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
    <cds-icon-button size="sm" loading-state="loading">
        <cds-icon shape="user"></cds-icon>
    </cds-icon-button>
</div>
      

DarkTheme

       <div cds-layout="vertical gap:sm" cds-theme="dark">
    <div cds-layout="horizontal gap:sm">
        <cds-icon-button aria-label="icon button demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button status="success" aria-label="icon button success demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button status="danger" aria-label="icon button danger demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button status="danger" aria-label="icon button disabled demo" disabled>
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </div>
    <div cds-layout="horizontal gap:sm">
        <cds-icon-button action="outline" aria-label="icon button outline demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline" status="success" aria-label="icon button outline success demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline" status="danger" aria-label="icon button outline danger demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
        <cds-icon-button action="outline" disabled aria-label="icon button outline disabled demo">
            <cds-icon shape="user"></cds-icon>
        </cds-icon-button>
    </div>
</div>
      

CustomStyles

       <style>
    .btn-branding {
        --background: #a447bb;
        --border-color: #74178b;
        --border-width: 0.15rem;
        --border-radius: 0.4rem;
        --padding-vertical: 0.9rem 1rem;
        --font-size: 0.9rem;
        --height: 2.4rem;
    }

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

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