Button
A customizable button component with multiple variants and sizes. Built for consistency across Tezos marketing experiences.
Installation
Install the button component using the shadcn CLI:
npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/button.jsonVariants
Primary
Main call-to-action buttons for primary actions.
<Button variant="primary">Primary Button</Button>Secondary
For secondary actions that are less prominent.
<Button variant="secondary">Secondary Button</Button>Outline
Outlined style for tertiary actions.
<Button variant="outline">Outline Button</Button>Ghost
Minimal style for subtle actions.
<Button variant="ghost">Ghost Button</Button>Destructive
For dangerous or destructive actions like delete.
<Button variant="destructive">Delete</Button>Sizes
Buttons come in four sizes: small, medium (default), large, and icon.
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="icon"><Icon /></Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | "primary" | Button style: primary, secondary, outline, ghost, destructive |
| size | string | "md" | Button size: sm, md, lg, icon |
| asChild | boolean | false | Merge props with child element instead of rendering button |
| disabled | boolean | false | Disable the button |