Button

stable

Primary action primitive, pre-styled to the accent tokens. Six variants, four sizes, asChild for links.

shell

pnpm dlx shadcn@latest add @webzenia/button

preview

variants

default

secondary

outline

ghost

destructive

link

states

defaulthoverfocus-visible (ring)disabledpressed

props

Visual emphasis.

sizedefault | sm | lg | icon= default

Control height + padding.

asChildboolean= false

Render as a slot — wrap a <Link> to make a button-styled link.

accessibility

Use accent-fill (not accent-default) for text-bearing fills — AA contrast (see Accessibility).

Always has a visible focus ring; never remove outline without a replacement.

For a link styled as a button, use asChild so it stays an <a>.

usage

tsx

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

<Button>Book a call</Button>
<Button variant="outline" size="lg">View work</Button>
<Button asChild><Link href="/contact">Contact</Link></Button>