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" 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" | "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
readonly boolean
type "button" | "submit"
name string
value string
disabled boolean

Icon Button CSS Properties

Name
--background
--border-color
--border-radius
--border-width
--box-shadow-color
--color
--font-size
--height
--padding
--font-family
--font-weight
--letter-spacing
--min-width
--text-decoration
--text-transform

Icon Button Slots

Name Description
default Content slot for inside the button