Button

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/button.json

Usage

import { Button } from "@/components/ui/button";

<Button>Button</Button>

Accessibility

• When using icon-only, add an aria-label prop so screen readers can identify the button’s purpose.

Link

The asChild prop renders another element with button styling.

Variants

The variant prop controls the button's visual style.

Default

Outline

Secondary

Ghost

Link

Destructive

Sizes

The size prop controls the button dimensions.

Extra Small

Small

Large

Extra Large

Pill

The pill prop creates fully rounded buttons.

Disabling click effect

The clickEffect prop disables the click animation.

State

Disabled

The disabled prop disables user interaction.

Loading

The isLoading prop displays a loading indicator.

Examples

Icon only

Create icon-only buttons using the icon-* size variants.

With icon

Icons can be placed alongside text for visual context.

Touch hitbox

For a larger tap target without changing how the button looks, use the Hitbox.

Custom color

API Reference