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>