Button
A button triggers an event or action. They let users know what will happen next.Neutral selected states
When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.
Installation
| Install | yarn add @atlaskit/button |
|---|---|
| Source | Bitbucket.org, (opens new window) |
| npm | @atlaskit/button, (opens new window) |
| Bundle | unpkg.com, (opens new window) |
Props
Each button type also supports its respective HTML element attributes, except for:
disabled(useisDisabledinstead)stylerole
| Description | Additional information to be included in the |
|---|---|
| Type | { [x: string]: any; } |
| Description | The button style variation. |
|---|---|
| Type | "default" | "danger" | "primary" | "rovo" | "subtle" | "warning" | "discovery" |
| Description | Set the button to autofocus on mount. |
|---|---|
| Type | boolean |
| Description | Text content to be rendered in the button. |
|---|---|
| Type | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal |
| Description | No description. |
|---|---|
| Type | never |
| Description | Places an icon within the button, after the button's text. |
|---|---|
| Type | ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>> |
| Description | Places an icon within the button, before the button's text. |
|---|---|
| Type | ComponentClass<Omit<IconProps, "size"> | Omit<NewIconProps, "spacing" | "size">, any> | FunctionComponent<Omit<IconProps, "size"> | Omit<...>> |
| Description | An optional name used to identify the button to interaction content listeners. By default, button fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See the pressable or anchor primitive code examples for more information. |
|---|---|
| Type | string |
| Description | Disable the button to prevent user interaction. |
|---|---|
| Type | boolean |
| Description | Conditionally show a spinner over the top of a button |
|---|---|
| Type | boolean |
| Description | Indicates that the button is selected. |
|---|---|
| Type | boolean |
| Description | Handler called on blur. |
|---|---|
| Type | (event: FocusEvent<HTMLButtonElement, Element>) => void |
| Description | Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics. |
|---|---|
| Type | (e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, analyticsEvent: UIAnalyticsEvent) => void |
| Description | Handler called on focus. |
|---|---|
| Type | (event: FocusEvent<HTMLButtonElement, Element>) => void |
| Description | No description. |
|---|---|
| Type | ((instance: HTMLButtonElement) => void) | RefObject<HTMLButtonElement> |
| Description | Option to fit button width to its parent width. |
|---|---|
| Type | boolean |
| Description | Controls the amount of padding in the button. |
|---|---|
| Type | "compact" | "default" |
| Description | A unique string that appears as data attribute |
|---|---|
| Type | string |