DÁP Design System - Icon button webcomponent

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 lg, md, or sm.

<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/dist/dds'

Importing React

import { DapDSIconButtonReact } from 'dap-design-system/dist/react'

Slots

Name	Description
`(default)`	The icon of the button.

Attributes

Property	Type	Default	Description
`variant`	`ButtonVariant`	`'neutral'`	The type of the button. Can be `neutral`, `brand`, `inverted` or `inverted-brand` . Default is `neutral`.
`size`	`ButtonSize`	`'md'`	The size of the button. Default is `md`. Can be `lg`, `md`, or `sm`.
`disabled`	`boolean`	`false`	If true, the button is disabled. Default is false.
`htmlType`	`HtmlButtonType`	`'button'`	The type of the button. Can be `button`, `submit`, or `reset`. Default is `button`.
`ariaLabel`	`string`		The aria label of the button.
`name`	`string`		The name of the button.
`icon`	`string`		The icon of the button. You can use the icon name from the icon component.
`iconSize`	`number`		The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.
`clean`	`boolean`	`false`

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main button container.
`content`	The icon of the button.