Syner Design

Button

Displays a button or a component that looks like a button.

Installation

The Button component is part of the @syner/ui package.

import { Button } from '@syner/ui/components/button';

Usage

<Button>Click me</Button>

Variants

The Button component supports multiple variants.

Default

<Button variant="default">Default</Button>

Destructive

<Button variant="destructive">Destructive</Button>

Outline

<Button variant="outline">Outline</Button>

Secondary

<Button variant="secondary">Secondary</Button>

Ghost

<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

The Button component supports multiple sizes.

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <ArrowRight />
</Button>

With Icon

<Button>
  <AlertCircle />
  With Icon
</Button>

Disabled

<Button disabled>Disabled</Button>

On this page