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.
On this page
| Name | Description | Default |
|---|---|---|
| disabled | @deprecated use The All DLS components are designed to use the 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 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 | - |
| Name | Description | Default |
|---|---|---|
| disabled | @deprecated use The All DLS components are designed to use the 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 | - |
Connect with the DLS Team on Slack or by email.
Check out additional resources.