Button
Triggers an action or event with three colors and three variants to control emphasis. Supports leading and trailing icons via iconStart and iconEnd, and inline loading feedback with spinnerStart or spinnerEnd.
1<Button>Button</Button>
2
Usage
1import { Button } from "atlas";
2
3<Button color="brand" variant="solid">
4 Click me
5</Button>
6
Examples
Default
The default
Button renders with color="brand" and variant="solid", making it the highest-emphasis action on the page. Reserve it for the single most important action in a given context.1<Button>Button</Button>
2
Neutral
Use
color="neutral" for secondary actions that shouldn’t compete with the primary action. Works well for cancel buttons, back navigation, or any supporting action alongside a brand button.1<Button color="neutral">Neutral</Button>
2
Destructive
Use
color="danger" for actions that delete, remove, or have irreversible consequences. The red treatment signals caution and pairs well with a confirmation dialog.1<Button color="danger">Delete</Button>
2
Soft
Use
variant="soft" for lower-emphasis actions that should be visible but less prominent than solid. The tinted background keeps the button identifiable without dominating the layout.1<Button color="neutral" variant="soft">Soft</Button>
2
Ghost
Use
variant="ghost" for minimal actions that blend into their surroundings. Ghost buttons have no background until hovered, making them ideal for toolbars, inline actions, and dense interfaces.1<Button color="neutral" variant="ghost">Ghost</Button>
2
With icon
Pass an icon to
iconStart or iconEnd to render it alongside the label. Icons reinforce the action’s meaning and improve scannability in button-heavy layouts.1<Button iconStart={<IconPencil />}>Edit</Button>
2
Danger with icon
Combine
color="danger" with variant="soft" and an icon for destructive secondary actions. This is the go-to pattern when a delete or remove action shares space with non-destructive controls.1<Button iconEnd={<IconTrashCan />} color="danger" variant="soft">
2 Delete
3</Button>
4
Loading
Set
spinnerStart or spinnerEnd to show a spinner that slides in alongside the label. The button is automatically disabled while loading, preventing double submissions.1<Button spinnerStart onClick={handleClick}>
2 Save changes
3</Button>
4
Disabled
Set
disabled to prevent interaction. The button’s opacity is reduced to signal that it’s inactive. Prefer disabling over hiding so users understand an action exists but isn’t available yet.1<Button disabled>Disabled</Button>
2
API Reference
| Prop | Type | Default |
|---|---|---|
| color | "brand" | "neutral" | "danger" | "brand" |
| variant | "solid" | "soft" | "ghost" | "solid" |
| iconStart | ReactNode | - |
| iconEnd | ReactNode | - |
| spinnerStart | boolean | false |
| spinnerEnd | boolean | false |
| disabled | boolean | false |
- Icon Button for icon-only actions
- Button Group for grouping related buttons together