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
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
size'md'
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-widthBorder width of the icon button (default: var(--dds-border-width-base))
--dds-icon-button-border-colorBorder color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))
--dds-icon-button-border-radiusBorder radius of the icon button (default: var(--dds-radius-rounded))
--dds-icon-button-hover-border-widthBorder width on hover (default: var(--dds-border-width-large))
--dds-icon-button-active-border-widthBorder width when active (default: var(--dds-border-width-xlarge))
--dds-icon-button-transitionTransition property for the icon button (default: var(--dds-transition-all))
--dds-icon-button-cursorCursor style for the button (default: pointer)
--dds-icon-button-disabled-cursorCursor style for the disabled button (default: not-allowed)
--dds-icon-button-column-gapColumn gap between elements (default: var(--dds-spacing-100))
--dds-icon-button-padding-lgPadding for large size (default: var(--dds-spacing-0))
--dds-icon-button-padding-mdPadding for medium size (default: var(--dds-spacing-100))
--dds-icon-button-padding-smPadding for small size (default: var(--dds-spacing-50))
--dds-icon-button-padding-xsPadding for extra small size (default: var(--dds-spacing-25))
--dds-icon-button-size-lgSize for large icon button (default: var(--dds-spacing-800))
--dds-icon-button-size-mdSize for medium icon button (default: var(--dds-spacing-600))
--dds-icon-button-size-smSize for small icon button (default: var(--dds-spacing-400))
--dds-icon-button-size-xsSize for extra small icon button (default: var(--dds-spacing-300))
--dds-icon-button-neutral-bgBackground color for neutral variant (default: var(--dds-transparent-black-subtle))
--dds-icon-button-neutral-colorText color for neutral variant (default: var(--dds-icon-neutral-base))
--dds-icon-button-neutral-hover-bgHover background color for neutral variant (default: var(--dds-transparent-black-base))
--dds-icon-button-neutral-active-bgActive background color for neutral variant (default: var(--dds-transparent-black-medium))
--dds-icon-button-brand-bgBackground color for brand variant (default: var(--dds-button-subtle-background-enabled))
--dds-icon-button-brand-colorText color for brand variant (default: var(--dds-button-subtle-icon-enabled))
--dds-icon-button-brand-hover-bgHover background color for brand variant (default: var(--dds-button-subtle-background-hover))
--dds-icon-button-brand-active-bgActive background color for brand variant (default: var(--dds-button-subtle-background-pressed))
--dds-icon-button-inverted-bgBackground color for inverted variant (default: var(--dds-transparent-white-subtle))
--dds-icon-button-inverted-colorText color for inverted variant (default: var(--dds-button-primary-icon-enabled))
--dds-icon-button-inverted-hover-bgHover background color for inverted variant (default: var(--dds-transparent-white-base))
--dds-icon-button-inverted-active-bgActive background color for inverted variant (default: var(--dds-transparent-white-medium))
--dds-icon-button-inverted-brand-bgBackground color for inverted brand variant (default: var(--dds-button-primary-background-enabled))
--dds-icon-button-inverted-brand-colorText color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))
--dds-icon-button-inverted-brand-hover-bgHover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))
--dds-icon-button-inverted-brand-active-bgActive background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))
--dds-icon-button-disabled-colorColor for disabled state (default: 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.