tarve
Docs GitHub

Button

The primary action control, with variants and sizes.

ButtonProps packages/core/src/components/button.ts:101 ↗

Import

import { Button } from "@tarve/core";

Usage

Button.tsx
import { Button, Icon, Row } from "@tarve/core";

<Row gap={8}>
  <Button onClick={() => console.log("saved")}>Save</Button>
  <Button variant="outline">Cancel</Button>
  <Button variant="ghost" size="sm">
    <Icon name="plus" />
    New
  </Button>
  <Button variant="destructive" disabled>Delete</Button>
</Row>

Props

PropTypeDefault
control Control—
disabled boolean—
onClick () => void—
onHover (hovered: boolean) => void—
size "sm" | "default" | "lg""default"
variant ButtonVariant"default"

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ButtonVariant
type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";