Button API

Import

import { Button } from "@stratakit/bricks";
// OR
import Button from "@stratakit/bricks/Button";

Base element: <button>

A styled button element which allows the user to perform an action when clicked.

Example:

<Button onClick={() => doSomething()}>Click me</Button>

Start and end icons can be added by passing Icon as children.

<Button>
  <Icon href={…} />
  Click me
  <Icon href={…} />
</Button>

The button’s appearance can be customized using the variant and tone props.

Type: "neutral" | "accent" | undefined (optional)

Default: "neutral"

The tone of the button. Most buttons should be neutral. Accent buttons can be used to draw attention to the primary action.

Type: "solid" | "outline" | "ghost" | undefined (optional)

Default: "solid"

The variant of the button, i.e. solid, outline, or ghost.