To use the icon button component import the component in your JavaScript.
import '@cds/core/icon/register.js';
import '@cds/core/button/register.js';
<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>
<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="warning">
<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>
Outline
<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>
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>
<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>
<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>
<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>