Skip to main content Skip to navigation Skip to search

Icon Button

Icon Button

Icon Button Properties

Name Type Description
ariaLabel string The aria-label attribute is required for accessibility. The cds-icon-button will warn if used without the aria-label being set. Ideally, the aria-label will be specific to the button's purpose. Avoid sharing generic labels across multiple icon buttons on a page.
action 'solid' | 'outline' | 'flat' | 'flat-inline' Define the type of action the button triggers - `solid`: buttons direct the user’s attention to the primary action the application is suggesting that the user take. - `outline`: buttons indicate secondary actions that compliments a primary action or reduces visual noise when there are many actions on the page. - `flat`: buttons are used as tertiary buttons. Can also be used inline because they are different from content in style and recognizable as buttons alongside content.
status 'primary' | 'success' | 'warning' | 'danger' | 'neutral' | 'inverse' Sets the color of the button to match the following string statuses
size 'sm' | 'md' Sets the overall height and width of the button based on the following string values:
block boolean Sets if the button should be full width with display block
loadingState default | loading | success | error `default`: shows the content of the button - `loading`: disables the button and shows a spinner inside the button - `success`: disables the button and shows a check mark inside the button; auto-triggers to change back to DEFAULT state after 1000 ms - `error`: shows the content of the button (in the context of application, this state is usually entered from a LOADING state. the application should show appropriate error message)
readonly boolean
type 'button' | 'submit'
name string
value string
disabled boolean
ariaDisabled 'true' | 'false' | null

Icon Button CSS Properties


Icon Button Slots

Name Description
Content slot for inside the button