IconButton🔗
IconButtons are used to visually distinguish an Icon as an element that the user can interact with to effect a change. For example, a close button on a Dialog.
The IconButton is complete with all requisite DLS base, accessibility and interaction styling and should not be visually altered or extended.
Basic Example🔗
Size🔗
IconButtons render visually at 40px x 40px but with a 44px x 44px touch target area for WCAG21 compliance. The icon itself is 24px x 24px.
Variant🔗
There are two IconButton variants. The default variant is filled.
Intent🔗
Intent defines what kind of action the icon button is used for, it's appearance will change based on the intent. The default intent is primary. The secondary intent is intended for rendering IconButtons on a secondary background.
Disabled🔗
Icon Buttons that are disabled can't be interacted with. The visual style of the button also changes to indicate to the user that the buttons are in a disabled state.
Props - IconButton🔗
Name | Description | Type | Default Value |
|---|---|---|---|
aria-label | Describe the IconButton's response to interaction @remarks Required, but typed optional as translated strings return undefined on first render | string ｜ undefined | n/a |
autoFocus | true to programmatically focus on the IconButton on render | boolean ｜ undefined | null |
disabled | true when IconButton should not be interactable | boolean ｜ undefined | false |
iconName | The Icon to be displayed within the IconButton | "alarm" ｜ "blocked" ｜ "calendar" ｜ "checkmark" ｜ "delete" ｜ "designyourown" ｜ "device" ｜ "extendedperiod" ｜ "externallink" ｜ "filter" ｜ "info" ｜ "leaf" ｜ "link" ｜ "map-map" ｜ ... 29 more ... ｜ "thirdparty-youtube" | n/a |
intent | "primary" ｜ "destructive" ｜ undefined | primary | |
onClick | Function to be invoked on IconButton interaction | (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void | n/a |
variant | "default" ｜ "outline" ｜ "media" ｜ undefined | default |