Button

Displays a button or a component that looks like a button.

Saved preference for elorm init --ui-library base-ui

PreviewCode

"use client"

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

export function ButtonDemo() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-wrap gap-4">
        <Button>Default</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="link">Link</Button>
      </div>
      <div className="flex flex-wrap gap-4">
        <Button variant="soft" size="soft">
          Request a demo
        </Button>
        <Button variant="soft-outline" size="soft">
          Join waitlist
        </Button>
      </div>
    </div>
  )
}

Installation#

Usage#

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

Displays a button or a component that looks like a button.

Primary actions. Use variant=outline for secondary actions, variant=ghost for tertiary.

Composition#

Button
├── DialogFooter
├── CardFooter

Examples#

Secondary#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="secondary">Secondary</Button>
  )
}

Outline#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="outline">Outline</Button>
  )
}

Ghost#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="ghost">Ghost</Button>
  )
}

Destructive#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="destructive">Destructive</Button>
  )
}

Link#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="link">Link</Button>
  )
}

Soft#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="soft" size="soft">Request a demo</Button>
  )
}

Soft Outline#

PreviewCode

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

export function ButtonDemo() {
  return (
    <Button variant="soft-outline" size="soft">Join waitlist</Button>
  )
}

Avoid#

Do not use raw bg-blue-500
Do not nest buttons inside buttons

Alternatives Input