Button

A button or an element styled as a button.

Installation


pnpm dlx shadcn@latest add @shark/button


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


<Button>Button</Button>

The asChild prop renders another element with button styling.

Add aria-label prop to the button so screen readers can identify the button.

For increasing the tap target area, use Hitbox.

Show hitbox

Prop	Type	Default
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "link" \| "destructive"`	`"default"`
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "icon-xs" \| "icon-sm" \| "icon-md" \| "icon-lg" \| "icon-xl"`	`"md"`
`clickEffect`	`boolean`	`true`
`isLoading`	`boolean`	`false`
`className`	`string`	`-`
`asChild`	`boolean`	`false`