Button

The Button component triggers actions, submits forms, or acts as a styled button.

Primary

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

export default function Example() {
  return (
    <div className="flex h-8 w-full items-center justify-center">
      <Button variant="primary">Button</Button>
    </div>
  )
}

Secondary

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

export default function Example() {
  return (
    <div className="flex h-8 w-full items-center justify-center">
      <Button variant="secondary">Button</Button>
    </div>
  )
}

Outline

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

export default function Example() {
  return (
    <div className="flex h-8 w-full items-center justify-center">
      <Button variant="outline">Button</Button>
    </div>
  )
}

Ghost

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

export default function Example() {
  return (
    <div className="flex h-8 w-full items-center justify-center">
      <Button variant="ghost">Button</Button>
    </div>
  )
}

Danger

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

export default function Example() {
  return (
    <div className="flex h-8 w-full items-center justify-center">
      <Button variant="danger">Button</Button>
    </div>
  )
}

Success

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

export default function Example() {
  return (
    <div className="flex h-8 w-full items-center justify-center">
      <Button variant="success">Button</Button>
    </div>
  )
}