registry:component

Button

v1.0.0ga

Action primitive with size and style variants.

Registry Endpoint

npx shadcn@latest add @aavya/ui-button

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-button.json

Live Preview

Variants

variant

default · defaultdestructiveoutlineprimaryoutlinesecondaryghostlink

size

default · defaultsmlgiconicon-smicon-lg

Props

Prop	Type	Default
asChild?	boolean	false

Button forwards remaining props to all <button> element props.

Guidelines

Use one primary (default) Button per view for the main action; make the rest secondary or outline.
Start labels with a verb — "Save changes", not "OK".
Reserve the destructive variant for irreversible actions, paired with an Alert Dialog.

Don’t

Don't stack two primary Buttons side by side — demote all but one, or the hierarchy collapses.
Don't use a Button to navigate between pages — use a link or the Navigation Menu.
Don't cram more than ~2 words into an sm Button — bump the size or shorten the label.

Accessibility

Role

Native <button> (or a semantic element via asChild / Slot).

Keyboard

Enter and Space activate; Tab moves focus. (handled)

Screen reader

Announced by its text label. Icon-only Buttons must get an aria-label — you provide this.

Focus

A visible focus ring is handled; don't remove it.

Gotcha

With asChild rendering an <a>, it's a link, not a button — Space won't activate it. Keep semantics honest with the actual action.

Usage Snippet

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

export default function Example() {
  return (
    <div className="p-6">
      <Button />
    </div>
  )
}

Source Preview

import * as React from 'react'

import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
        outline:
          'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
        primaryoutline: 'border-primary/25 bg-primary/10 text-primary hover:bg-primary/30',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary