Buttons

Button

A bold Swirski UI button used for links, actions and call-to-actions.

Component

import { Button } from "@swirski/ui";

7 controls

Controls

children

tone

icon

variant

iconSide

href

disabled

<Button href="#preview" tone="blue">
  View pieces
</Button>

11 generated

Prop	Type	Default	Notes
`as`	`ElementType`	`-`	Custom component used for the root element, such as Next.js Link.
`asChild`	`boolean`	`false`	Passes button props to a single child element.
`children`	`ReactNode`	`-`	Button label or inline content.
`className`	`string`	`-`	Adds classes to the root button or anchor.
`href`	`string`	`-`	Renders the button as an anchor when provided.
`icon`	`'arrow-up-right' \| 'github'`	`-`	Adds a bundled icon beside the label.
`iconSide`	`'left' \| 'right'`	`"left"`	Controls where the optional icon is rendered.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Controls the button scale.
`tone`	`'blue' \| 'yellow' \| 'red' \| 'white' \| 'black'`	`"blue"`	Applies the Swirski color treatment.
`variant`	`'solid' \| 'outline' \| 'blue' \| 'yellow' \| 'red' \| 'white' \| 'black' \| 'ghost'`	`"solid"`	Controls the visual treatment independently from tone.
`withShadow`	`boolean`	`true`	Generated from ButtonProps.
`...anchorProps`	`AnchorHTMLAttributes<HTMLAnchorElement>`	`-`	Forwarded when the component renders an anchor.
`...buttonProps`	`ButtonHTMLAttributes<HTMLButtonElement>`	`-`	Forwarded when the component renders a button.