Button

A clickable action styled with the design system's tokens.

Installation

npm install @sipe-team/button

import '@sipe-team/button/styles.css';

fill (default) for the primary action, outline for secondary, ghost for low-emphasis.

lg (default) suits most UI; sm/md for dense layouts, xl for prominent calls to action.

leftIcon and rightIcon accept any ReactNode.

The native disabled attribute is forwarded and styled the same for every variant — a disabled fill and a disabled outline render identically.

Render as a different element (e.g. a link) while keeping the button's styles.

import { Button } from '@sipe-team/button';

export default () => (
  <Button variant="fill" size="lg" leftIcon={<Icon />}>
    Label
  </Button>
);

Renders a native <button type="button"> by default. leftIcon / rightIcon are wrapped in a span on either side of the label.

Renders a <button type="button"> and forwards its ref.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The button label.
`variant`	`'fill' \| 'outline' \| 'ghost'`	`'fill'`	Visual style.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'lg'`	Height, padding, radius, and font size.
`leftIcon`	`ReactNode`	—	Rendered before the label.
`rightIcon`	`ReactNode`	—	Rendered after the label.
`asChild`	`boolean`	`false`	Merge props onto the child instead of a `button`.

Also accepts every ComponentProps<'button'> (disabled, onClick, type, …), forwarded to the rendered element. type defaults to "button".