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

Importing React

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

Attributes

Property	Type	Default	Description
`variant`	`'neutral'`, `'brand'` , `'inverted'` , `'inverted-brand'`	`'neutral'`	The type of the button.
`clean`	`boolean`	`false`	Adds a transparent background to the button
`size`	`'lg'`, `'md'` , `'sm'` , `'xs'`	`'md'`	The size of the icon
`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.
`disabled`	`boolean`	`false`	The disabled state of the button.
`htmlType`	`'button'`, `'submit'` , `'reset'`	`'button'`	The type of the button.
`icon`	`string`		The icon of the button. You can use the icon names from the icon component
`name`	`string`		The name of the button
`ariaLabel`	`string`		The aria label of the button.

Slots

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

Events

No custom events available.

CSS Parts

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

CSS Custom Properties

Property Name	Description
`--dds-icon-button-border-width`	The width of the button's border. Defaults to var(--dds-border-width-base).
`--dds-icon-button-border-color`	The color of the button's border. Defaults to var(--dds-border-neutral-transparent-interactive).
`--dds-icon-button-border-radius`	The border radius of the button. Defaults to var(--dds-radius-rounded).
`--dds-icon-button-hover-border-width`	The width of the button's border on hover. Defaults to var(--dds-border-width-large).
`--dds-icon-button-active-border-width`	The width of the button's border when active. Defaults to var(--dds-border-width-xlarge).
`--dds-icon-button-transition`	The transition property for the button. Defaults to var(--dds-transition-all).
`--dds-icon-button-cursor`	The cursor style for the button. Defaults to pointer.
`--dds-icon-button-disabled-cursor`	The cursor style for the disabled button. Defaults to not-allowed.
`--dds-icon-button-column-gap`	The gap between icon and text. Defaults to var(--dds-spacing-100).
`--dds-icon-button-padding-lg`	Padding for large size. Defaults to var(--dds-spacing-0).
`--dds-icon-button-padding-md`	Padding for medium size. Defaults to var(--dds-spacing-100).
`--dds-icon-button-padding-sm`	Padding for small size. Defaults to var(--dds-spacing-50).
`--dds-icon-button-padding-xs`	Padding for extra small size. Defaults to var(--dds-spacing-25).
`--dds-icon-button-size-lg`	Size for large button. Defaults to var(--dds-spacing-800).
`--dds-icon-button-size-md`	Size for medium button. Defaults to var(--dds-spacing-600).
`--dds-icon-button-size-sm`	Size for small button. Defaults to var(--dds-spacing-400).
`--dds-icon-button-size-xs`	Size for extra small button. Defaults to var(--dds-spacing-300).
`--dds-icon-button-neutral-bg`	Background color for neutral variant. Defaults to var(--dds-transparent-black-subtle).
`--dds-icon-button-neutral-color`	Text color for neutral variant. Defaults to var(--dds-icon-neutral-base).
`--dds-icon-button-neutral-hover-bg`	Hover background color for neutral variant. Defaults to var(--dds-transparent-black-base).
`--dds-icon-button-neutral-active-bg`	Active background color for neutral variant. Defaults to var(--dds-transparent-black-medium).
`--dds-icon-button-brand-bg`	Background color for brand variant. Defaults to var(--dds-button-subtle-background-enabled).
`--dds-icon-button-brand-color`	Text color for brand variant. Defaults to var(--dds-button-subtle-icon-enabled).
`--dds-icon-button-brand-hover-bg`	Hover background color for brand variant. Defaults to var(--dds-button-subtle-background-hover).
`--dds-icon-button-brand-active-bg`	Active background color for brand variant. Defaults to var(--dds-button-subtle-background-pressed).
`--dds-icon-button-inverted-bg`	Background color for inverted variant. Defaults to var(--dds-transparent-white-subtle).
`--dds-icon-button-inverted-color`	Text color for inverted variant. Defaults to var(--dds-button-primary-icon-enabled).
`--dds-icon-button-inverted-hover-bg`	Hover background color for inverted variant. Defaults to var(--dds-transparent-white-base).
`--dds-icon-button-inverted-active-bg`	Active background color for inverted variant. Defaults to var(--dds-transparent-white-medium).
`--dds-icon-button-inverted-brand-bg`	Background color for inverted brand variant. Defaults to var(--dds-button-primary-background-enabled).
`--dds-icon-button-inverted-brand-color`	Text color for inverted brand variant. Defaults to var(--dds-button-primary-icon-enabled).
`--dds-icon-button-inverted-brand-hover-bg`	Hover background color for inverted brand variant. Defaults to var(--dds-button-primary-background-enabled).
`--dds-icon-button-inverted-brand-active-bg`	Active background color for inverted brand variant. Defaults to var(--dds-button-primary-background-enabled).
`--dds-icon-button-disabled-color`	Color for disabled state. Defaults to var(--dds-icon-neutral-disabled).