Button

stable

Triggers an action. Six variants, four sizes and a built-in pending state.

since v1.01.9 kB gzip

Preview

Code

Pressed 0 times

variant

size

color

Trailing iconisPendingisDisabled

Generated from controls

<Button onPress={deploy}>
  Deploy preview
  <ArrowRightIcon />
</Button>

Installation

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add button

Usage

React

Import only

import { Button } from "@/components/strata";

export function SaveBar() {
  return (
    <div className="row gap-2">
      <Button variant="outline">Cancel</Button>
      <Button onPress={save}>Save changes</Button>
    </div>
  );
}

Props

Prop	Type	Default
`variant` Visual weight of the button.	"solid" \| "soft" \| "outline" \| "ghost" \| "link"	"solid"
`size` Height, padding and icon size.	"xs" \| "sm" \| "md" \| "lg"	"md"
`color` Tone applied to the variant.	"brand" \| "neutral" \| "danger" \| "success"	"brand"
`isPending` Shows a spinner and blocks repeat presses.	boolean	false
`isDisabled` Prevents interaction and dims the control.	boolean	false
`onPress` Fires on mouse, touch, keyboard and assistive-tech activation.	(e: PressEvent) => void	—
`className` Extra Strata utilities, optionally derived from render state.	string \| (state) => string	—

Accessibility

Toggle group

A set of pressable toggles for switching views or formatting text.

Was this page helpful?

Documented since v1.0 · components/button.mdx