Icon button is a button with an icon. It can be used to trigger an action or to navigate to another page.
The variant of the button. Can be neutral
, brand
, inverted
or inverted-brand
. Default is neutral
.
The size of the button. Default is md
. Can be sm
, md
, or lg
.
To set the icon, use the icon
attribute, or use the default slot to add a custom icon.
import { DapDSIconButton } from 'dap-design-system/dist/dds'
import { DapDSIconButtonReact } from 'dap-design-system/dist/react'
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. |
Name | Description |
---|---|
(default) | The icon of the button. |
No custom events available.
Part Name | Description |
---|---|
base | The main button container. |
content | The icon of the button. |
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). |