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 three IconButton variants. The default variant is transparent and fits most use cases.

The media variant should be used any time an IconButton is placed on top of an image or video, such as for media controls.

Intent

Intent defines what kind of action the icon button is used for, the colors will change based on the intent. The default intent is primary. The destructive intent can be used for buttons with destructive actions.

Bleed

To visually align an icon with other elements while retaining an accessible touch area, you can use the bleed property. It allows the IconButton background to bleed out into the surrounding layout, leaving the button to only take up the space for the icon itself.

This is the default except for the outline and media variants which have backgrounds or outlines that are always visible.

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
bleed	Allows the background to bleed out into the surrounding layout, leaving the button to only take up the space for the icon itself.	boolean ｜ undefined	variant === 'transparent'
disabled	true when IconButton should not be interactable	boolean ｜ undefined	false
iconLoading	Used to instruct the browser to defer loading of the icon when off-screen until the user scrolls near it.	"eager" ｜ "lazy" ｜ undefined	n/a
iconName	The Icon to be displayed within the IconButton	"alarm" ｜ "avatar" ｜ "blocked" ｜ "calendar" ｜ "checkmark" ｜ "communication-chat" ｜ "communication-email" ｜ "communication-phone" ｜ "delete" ｜ "designyourown" ｜ "device" ｜ "extendedperiod" ｜ ... 36 more ... ｜ "time"	n/a
intent		"primary" ｜ "destructive" ｜ undefined	primary
onClick	Function to be invoked on IconButton interaction	(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void	n/a
variant		"transparent" ｜ "outline" ｜ "media" ｜ undefined	transparent