Buttons

Buttons are used as triggers for actions. Buttons can contain a label and/or an icon and come in a variety of styles and sizes.

Import

Primary Button

Loading preview
Open in Storybook

Secondary Button

Loading preview
Open in Storybook

Tertiary Button

Loading preview
Open in Storybook

Button with Icon (Start)

Loading preview
Open in Storybook

Button with Custom Icon Color

Loading preview
Open in Storybook

Loading State

Loading preview

Props

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
-
children

Contents of button body

ReactNode
-
onClick

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

MouseEventHandler<HTMLButtonElement>
-
isLoading

If true, shows loading button with spinner

boolean
-
variant

Determines style of button

"primary" | "secondary" | "tertiary"
-
iconPosition

Place icon before or after text

"start" | "end"
-
icon

Custom icon displayed in notification

ReactNode
-
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.