Button
An interactive element to perform an action or to navigate.Prop | Required | Description | Type |
|---|---|---|---|
label | ✅ | The text label of the button. | string |
size | — | Sets the button size. Defaults to medium. | "small" | "medium" |
tone | — | Different tone styles for the button. Defaults to primary. | "primary" | "neutral" | "critical" | "ghost" |
block | — | Makes the button fill its container. Defaults to false. | false | trueSupports responsive prop syntax |
icon | — | Puts the provided Icon component in the button. | ComponentClass<IconProps, any> | FunctionComponent<IconProps> |
iconPlacement | — | Controls the placement of icon in the button, left or right of the label. Defaults to left. | "left" | "right" |
iconOnly | — | Make the label visually hidden. Defaults to false. | boolean |
disabled | — | Prevents user interaction with the button and gives it a disabled style. Defaults to false. | boolean |
loading | — | When true, replaces the label with the LoadingSpinner component. Defaults to false. | boolean |
onClick | — | Function to be triggered following a click event of the button. | MouseEventHandler<HTMLButtonElement> |
type | — | Provide an alternate type if the button is within a form. Defaults to button. | "button" | "submit" | "reset" |
pressed | — | Controls the button's pressed state. Defaults to false. | boolean |
Prop | Required | Description | Type |
|---|---|---|---|
href | ✅ | The target URL. For flexibility with routing frameworks, this type can be modified. | string |
label | ✅ | The text label of the button. | string |
rel | — | Relationship to the target resource. Defaults to noreferrer noopener. | string |
target | — | Where to display the URL. | string |
download | — | Causes the browser to treat the linked URL as a download. | any |
shouldIgnoreCoreLinkComponent | — | Option to ignore the global link override on a case by case basis. Doing this will render the link as a normal <a>-element even if a linkComponent in <Core/> is defined. Defaults to false. | boolean |
size | — | Sets the button size. Defaults to medium. | "small" | "medium" |
tone | — | Different tone styles for the button. Defaults to primary. | "primary" | "neutral" | "critical" | "ghost" |
block | — | Makes the button fill its container. Defaults to false. | false | trueSupports responsive prop syntax |
icon | — | Puts the provided Icon component in the button. | ComponentClass<IconProps, any> | FunctionComponent<IconProps> |
iconPlacement | — | Controls the placement of icon in the button, left or right of the label. Defaults to left. | "left" | "right" |
iconOnly | — | Make the label visually hidden. Defaults to false. | boolean |
loading | — | When true, replaces the label with the LoadingSpinner component. Defaults to false. | boolean |
type | — | Provide an alternate type if the button is within a form. Defaults to button. | "button" | "submit" | "reset" |
pressed | — | Controls the button's pressed state. Defaults to false. | boolean |
providerOverrides | — | Pass overriding props from your global link provider. | ProviderOverrides |
ref | — | (instance: HTMLAnchorElement) => void | MutableRefObject<HTMLAnchorElement> |
Prop | Required | Description | Type |
|---|---|---|---|
icon | ✅ | Puts the provided Icon component in the button. | ComponentClass<IconProps, any> | FunctionComponent<IconProps> |
ariaLabel | ✅ | Provides a button label for assistive technologies. | string |
inputSize | ✅ | Sets the button size to the passed in input size. | "small" | "medium" | "xsmall" | "xxsmall" |
disabled | ✅ | Prevents user interaction with the button and gives it a disabled style. | boolean |
onClick | — | Function to be triggered following a click event of the button. | MouseEventHandler<HTMLButtonElement> |
disableTab | — | Disable tabbing to this button, if you implement another way make the UI accessible for keyboard-only users. | boolean |
paddingX | — | Left/right padding for the button. Defaults to xsmall. | "small" | "medium" | "xsmall" | "xxsmall" | "large" | "xlarge" | "none" | "auto" | "xxlarge"Supports responsive prop syntax |
children | — | Optionally pass in children, like an icon or a text string. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
type | — | Provide an alternate type if the button is within a form. Defaults to button. | "submit" | "reset" | "button" |
Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | The label content of the button. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
ariaLabel | — | Optionally pass an aria-label if label content (children) doesn't suffice for screen reader users. | string |
size | — | Sets the button size. Defaults to medium. | "small" | "medium" |
tone | — | Different tone styles for the custom button. Defaults to neutral. | "neutral" | "ghost" |
block | — | Makes the button fill its container. Defaults to false. | false | trueSupports responsive prop syntax |
disabled | — | Prevents user interaction with the button and gives it a disabled style. Defaults to false. | boolean |
onClick | — | Function to be triggered following a click event of the button. | MouseEventHandler<HTMLButtonElement> |
paddingLeft | — | Overrides the default left padding of the button. | "small" | "medium" | "xsmall" | "large" | "xlarge" | "none" | "auto" | "xxsmall" | "xxlarge" |
paddingRight | — | Overrides the default right padding of the button. | "small" | "medium" | "xsmall" | "large" | "xlarge" | "none" | "auto" | "xxsmall" | "xxlarge" |
pressed | — | Controls the button's pressed state. Defaults to false. | boolean |
className | — | The className prop can be used to add CSS classes to the custom button. | string |