Icon Button

Icons buttons are subtle triggers for actions. They are visual, clickable elements that represent and provide access to functions, commands, files, devices or directories, as well as common actions.

Import

Icon Button

Primary

Loading preview
Open in Storybook

Secondary

Loading preview
Open in Storybook

Tertiary Blue

Loading preview
Open in Storybook

Tertiary Gray

Loading preview
Open in Storybook

Round

Loading preview
Open in Storybook

Icon Toggle Button

Default Square

Loading preview
Open in Storybook

Circle

Loading preview
Open in Storybook

Props

IconToggleButton Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean
-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish
-
aria-expanded

The "expanded" state of the button. Used when the IconButton is the trigger element for some menu or popover.

Booleanish
-
aria-pressed

The "toggled" state of the button. Considered "toggled" when aria-pressed is truthy, or "untoggled" when falsy. Avoid using aria-pressed if the label of the button changes (for example, switching between "Play" and "Pause"). @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed aria-pressed - Accessibility || MDN}

Booleanish
-
children*

The icon to render in the button.

ReactElement<any, string | JSXElementConstructor<any>>
-
onClick

The event handler for click events on button, disabled for disabled buttons

MouseEventHandler<HTMLButtonElement>
-
screenReaderLabel*

The label to associate with the button, so screen-reader users know the action associated with the button.

string
-
isLoading

If true, shows loading button with spinner

boolean
-
shape

Determines shape of button

"round" | "square"
-
reactlytics
ReactlyticsProp
-
labelOverrides

Overrides for labels that have been defaulted in the component.

ButtonLabelOverrides
-

Icon Button Props

NameDescriptionDefault
disabled

@deprecated use aria-disabled instead.

The disabled prop removes the element from the Accessibility Tree and prevents it from receiving focus. This is not recommended.

All DLS components are designed to use the aria-disabled property instead, which will style the component to be disabled, but still allow keyboard focus and screen reader interactivity.

boolean
-
aria-disabled

If true, styles component as disabled and prevents interactivity. Screen reader reads as "dimmed" or "disabled".

Booleanish
-
aria-expanded

The "expanded" state of the button. Used when the IconButton is the trigger element for some menu or popover.

Booleanish
-
children*

The icon to render in the button.

ReactElement<any, string | JSXElementConstructor<any>>
-
screenReaderLabel*

The label to associate with the button, so screen-reader users know the action associated with the button.

string
-
isLoading

If true, shows loading button with spinner

boolean
-
shape

Determines shape of button

"round" | "square"
-
variant

Determines style of button

"primary" | "secondary" | "tertiary"
-
tertiaryColor

Determines color theme of the tertiary button

"blue" | "gray"
-
reactlytics
ReactlyticsProp
-
labelOverrides

Overrides for labels that have been defaulted in the component.

ButtonLabelOverrides
-

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.