Use as a drop-in replacement for buttons in Atlassian products.
AtlasButton handles mouse, keyboard, and touch interactions, focus behavior, and ARIA props for both native button elements and custom element types.
Extends the Fuegokit Button ARIA primitive.
Provides all props from the product environment, styles for various needs, normalized behavior across different platforms and devices, and consistent keyboard focus behavior.
Import
import {AtlasButton} from '@fuegokit/react'
Usage
Button group
To use in a group, use an AtlasButtonGroup.
Update the appearance prop in the live code sandbox below to see the changes take effect.
Props
AtlasButton
Use as a drop-in replacement for buttons in Atlassian products. Extends button ARIA primitive. Provides styles for various needs, normalized behavior across different platforms and devices, and consistent keyboard focus behavior.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | default | The base styling to apply to the button |
| spacing | 'compact' | 'default' | 'none' | default | Set the amount of padding in the button |
| shouldFitContainer | boolean | Option to fit button width to its parent width | |
| isSelected | boolean | Change the style to indicate the button is selected | |
| isDisabled | boolean | false | The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. |
| overlay | React.ReactNode | Used to 'overlay' something over a button. This is commonly used to display a loading spinner | |
| testId | string | A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests | |
| sx | SystemStyleObject | Style overrides to apply to the component. See also the sx prop. | |
| as | React.ElementType | button | The semantic element that should be rendered, an `<a>` tag or a `<button>` |
AtlasButtonGroup
Use as a drop-in replacement for groups of buttons in Atlassian products. Provides styles for various needs, normalized behavior across different platforms and devices, and consistent keyboard focus behavior.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | default | The base styling to apply to the buttons in the group |
| children | React.ReactNode | Elements to render in the button group | |
| sx | SystemStyleObject | Style overrides to apply to the component. See also the sx prop. |