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
privateHost HTMLElement
loadingState default | loading | success | error
styles CSSResultGroup[]

Icon Button CSS Properties


Icon Button Slots

Name Description
Content slot for inside the button