Icon button

Icon button is a button with an icon. It can be used to trigger an action or to navigate to another page.

Examples Default Icon Button 
<dap-ds-icon-button arialabel="close" icon="close-line">
  </dap-ds-icon-button>
Variants

The variant of the button. Can be neutral, brand, inverted or inverted-brand. Default is neutral.

<dap-ds-stack direction="row">
  <dap-ds-icon-button variant="neutral" icon="cookie-line" ariaLabel="Neutral">
  </dap-ds-icon-button>
  <dap-ds-icon-button variant="brand" icon="close-line" ariaLabel="Brand">
  </dap-ds-icon-button>
  <div style={{ backgroundColor: 'var(--dds-background-brand-base-inverted)'}}>
    <dap-ds-icon-button variant="inverted" icon="arrow-down-line" ariaLabel="Inverted">
    </dap-ds-icon-button>
  </div>
  <dap-ds-icon-button variant="inverted-brand" icon="arrow-up-line" ariaLabel="Inverted Brand">
  </dap-ds-icon-button>
</dap-ds-stack>
Sizes

The size of the button. Default is md. Can be sm, md, or lg.

<dap-ds-stack direction="row">
  <dap-ds-icon-button size="sm" icon="cookie-line" ariaLabel="Small">
  </dap-ds-icon-button>
  <dap-ds-icon-button size="md" icon="cookie-line" ariaLabel="Medium">
  </dap-ds-icon-button>
  <dap-ds-icon-button size="lg" icon="cookie-line" ariaLabel="Large">
  </dap-ds-icon-button>
</dap-ds-stack>
Disabled 
<dap-ds-icon-button disabled icon="cookie-line">
</dap-ds-icon-button>
Custom Icon

To set the icon, use the icon attribute, or use the default slot to add a custom icon.

<dap-ds-stack direction="row">
  <dap-ds-icon-button ariaLabel="Custom" variant="brand">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-6h4v-2H10v2z"/>
    </svg>
  </dap-ds-icon-button>
  <dap-ds-icon-button ariaLabel="Custom" variant="brand">
    <dap-ds-icon-arrow-left-down-line></dap-ds-icon-arrow-left-down-line>
  </dap-ds-icon-button>
</dap-ds-stack>
Importing 
import { DapDSIconButton } from 'dap-design-system'
Importing React 
import { DapDSIconButtonReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSIconButton } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
variant'neutral', 'brand' , 'inverted' , 'inverted-brand''neutral'The type of the button.
cleanbooleanfalseAdds a transparent background to the button
size'lg', 'md' , 'sm' , 'xs''md'The size of the icon
iconSizenumberThe size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.
disabledbooleanfalseThe disabled state of the button.
htmlType'button', 'submit' , 'reset''button'The type of the button.
iconstringThe icon of the button. You can use the icon names from the icon component
namestringThe name of the button
ariaLabelstringThe aria label of the button.
Slots
NameDescription
(default)The icon of the button.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main button container.
contentThe icon of the button.
iconThe icon of the icon.
icon-baseThe base of the icon.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-icon-button::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-icon-button::part(base),
.my-custom-dap-ds-icon-button::part(content) {
  /* Shared styles */
}

Example usage:

<dap-ds-icon-button class="my-custom-dap-ds-icon-button">
  Icon button
</dap-ds-icon-button>

.my-custom-dap-ds-icon-button::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties
Property NameDescription
--dds-icon-button-border-widthThe width of the button's border. Defaults to var(--dds-border-width-base).
--dds-icon-button-border-colorThe color of the button's border. Defaults to var(--dds-border-neutral-transparent-interactive).
--dds-icon-button-border-radiusThe border radius of the button. Defaults to var(--dds-radius-rounded).
--dds-icon-button-hover-border-widthThe width of the button's border on hover. Defaults to var(--dds-border-width-large).
--dds-icon-button-active-border-widthThe width of the button's border when active. Defaults to var(--dds-border-width-xlarge).
--dds-icon-button-transitionThe transition property for the button. Defaults to var(--dds-transition-all).
--dds-icon-button-cursorThe cursor style for the button. Defaults to pointer.
--dds-icon-button-disabled-cursorThe cursor style for the disabled button. Defaults to not-allowed.
--dds-icon-button-column-gapThe gap between icon and text. Defaults to var(--dds-spacing-100).
--dds-icon-button-padding-lgPadding for large size. Defaults to var(--dds-spacing-0).
--dds-icon-button-padding-mdPadding for medium size. Defaults to var(--dds-spacing-100).
--dds-icon-button-padding-smPadding for small size. Defaults to var(--dds-spacing-50).
--dds-icon-button-padding-xsPadding for extra small size. Defaults to var(--dds-spacing-25).
--dds-icon-button-size-lgSize for large button. Defaults to var(--dds-spacing-800).
--dds-icon-button-size-mdSize for medium button. Defaults to var(--dds-spacing-600).
--dds-icon-button-size-smSize for small button. Defaults to var(--dds-spacing-400).
--dds-icon-button-size-xsSize for extra small button. Defaults to var(--dds-spacing-300).
--dds-icon-button-neutral-bgBackground color for neutral variant. Defaults to var(--dds-transparent-black-subtle).
--dds-icon-button-neutral-colorText color for neutral variant. Defaults to var(--dds-icon-neutral-base).
--dds-icon-button-neutral-hover-bgHover background color for neutral variant. Defaults to var(--dds-transparent-black-base).
--dds-icon-button-neutral-active-bgActive background color for neutral variant. Defaults to var(--dds-transparent-black-medium).
--dds-icon-button-brand-bgBackground color for brand variant. Defaults to var(--dds-button-subtle-background-enabled).
--dds-icon-button-brand-colorText color for brand variant. Defaults to var(--dds-button-subtle-icon-enabled).
--dds-icon-button-brand-hover-bgHover background color for brand variant. Defaults to var(--dds-button-subtle-background-hover).
--dds-icon-button-brand-active-bgActive background color for brand variant. Defaults to var(--dds-button-subtle-background-pressed).
--dds-icon-button-inverted-bgBackground color for inverted variant. Defaults to var(--dds-transparent-white-subtle).
--dds-icon-button-inverted-colorText color for inverted variant. Defaults to var(--dds-button-primary-icon-enabled).
--dds-icon-button-inverted-hover-bgHover background color for inverted variant. Defaults to var(--dds-transparent-white-base).
--dds-icon-button-inverted-active-bgActive background color for inverted variant. Defaults to var(--dds-transparent-white-medium).
--dds-icon-button-inverted-brand-bgBackground color for inverted brand variant. Defaults to var(--dds-button-primary-background-enabled).
--dds-icon-button-inverted-brand-colorText color for inverted brand variant. Defaults to var(--dds-button-primary-icon-enabled).
--dds-icon-button-inverted-brand-hover-bgHover background color for inverted brand variant. Defaults to var(--dds-button-primary-background-enabled).
--dds-icon-button-inverted-brand-active-bgActive background color for inverted brand variant. Defaults to var(--dds-button-primary-background-enabled).
--dds-icon-button-disabled-colorColor for disabled state. Defaults to var(--dds-icon-neutral-disabled).
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-icon-button
  style="--dds-icon-button-border-width: value; --dds-icon-button-border-color: value;">
  Icon button
</dap-ds-icon-button>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-icon-button {
  --dds-icon-button-border-width: value;
  --dds-icon-button-border-color: value;
  --dds-icon-button-border-radius: value;
}

<dap-ds-icon-button class="my-custom-dap-ds-icon-button">
  Icon button
</dap-ds-icon-button>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-icon-button {
  --dds-icon-button-border-width: value;
  --dds-icon-button-border-color: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.