Button

A fundamental interactive element that triggers an action when activated. The Button component supports multiple variants, sizes, and states to fit different use cases in your application.

Installation

pnpm add @helgadigitals/vera-ui

npm install @helgadigitals/vera-ui

yarn add @helgadigitals/vera-ui

Usage

import { Button } from "@helgadigitals/vera-ui"

export default function Example() {
return <Button>Click me</Button>
}

import { Button } from "@helgadigitals/vera-ui"export default function Example() {return <Button>Click me</Button>}

Examples

Variants

import { Button } from "@helgadigitals/vera-ui"

export default function Example() {
return (
  <div className="flex flex-wrap gap-2">
    <Button variant="default">Default</Button>
    <Button variant="destructive">Destructive</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="link">Link</Button>
  </div>
)
}

import { Button } from "@helgadigitals/vera-ui"export default function Example() {return (  <div className="flex flex-wrap gap-2">    <Button variant="default">Default</Button>    <Button variant="destructive">Destructive</Button>    <Button variant="outline">Outline</Button>    <Button variant="secondary">Secondary</Button>    <Button variant="ghost">Ghost</Button>    <Button variant="link">Link</Button>  </div>)}

Sizes

import { Button } from "@helgadigitals/vera-ui"
import { PlusIcon } from "lucide-react"

export default function Example() {
return (
  <div className="flex flex-wrap items-center gap-2">
    <Button size="sm">Small</Button>
    <Button size="default">Default</Button>
    <Button size="lg">Large</Button>
    <Button size="icon">
      <PlusIcon className="h-4 w-4" />
    </Button>
  </div>
)
}

import { Button } from "@helgadigitals/vera-ui"import { PlusIcon } from "lucide-react"export default function Example() {return (  <div className="flex flex-wrap items-center gap-2">    <Button size="sm">Small</Button>    <Button size="default">Default</Button>    <Button size="lg">Large</Button>    <Button size="icon">      <PlusIcon className="h-4 w-4" />    </Button>  </div>)}

API Reference

Props

The Button component accepts all standard HTML button attributes plus these additional props:

Prop

Type

Accessibility

The Button component follows WAI-ARIA guidelines:

Keyboard Navigation: Fully accessible via keyboard (Enter/Space to activate)
Screen Readers: Proper semantic button element with accessible text
Focus Management: Clear focus indicators and focus trapping when needed
Disabled State: Properly communicated to assistive technologies

ARIA Labels: For icon-only buttons, always provide an aria-label or aria-describedby attribute for screen readers.

import { Button } from "@helgadigitals/vera-ui"
import { PlusIcon } from "lucide-react"

export default function Example() {
return (
  <Button size="icon" aria-label="Add new item">
    <PlusIcon className="h-4 w-4" />
  </Button>
)
}

import { Button } from "@helgadigitals/vera-ui"import { PlusIcon } from "lucide-react"export default function Example() {return (  <Button size="icon" aria-label="Add new item">    <PlusIcon className="h-4 w-4" />  </Button>)}

Button

On this page