Button

Variants

This is a documentation playground showcasing all available button variants. Import from @hobenakicoffee/libraries/components/ui/button

Default

  <Button variant="default">Default</Button>

Outline

  <Button variant="outline">Outline</Button>

Secondary

  <Button variant="secondary">Secondary</Button>

Ghost

  <Button variant="ghost">Ghost</Button>

Destructive

  <Button variant="destructive">Destructive</Button>

Link

  <Button variant="link">Link</Button>

Inverted

  <Button variant="inverted">Inverted</Button>

Dotted Underline

  <Button variant="dottedUnderline">Dotted Underline</Button>

Sizes

  <div className="flex items-center gap-4 flex-wrap">
    <Button size="xs">Extra Small</Button>
    <Button size="sm">Small</Button>
    <Button size="default">Default</Button>
    <Button size="lg">Large</Button>
  </div>

Icon Sizes

  <div className="flex items-center gap-4">
    <Button size="icon-xs" variant="default">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
    </Button>
    <Button size="icon-sm" variant="default">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
    </Button>
    <Button size="icon" variant="default">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
    </Button>
    <Button size="icon-lg" variant="default">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
    </Button>
  </div>

States

Loading

  <div className="flex items-center gap-4 flex-wrap">
    <Button loading variant="default">Loading</Button>
    <Button loading variant="outline">Loading</Button>
    <Button loading variant="secondary">Loading</Button>
    <Button loading variant="ghost">Loading</Button>
  </div>

Disabled

  <Button disabled variant="default">Disabled</Button>

With Icons

  <div className="flex items-center gap-4 flex-wrap">
    <Button variant="default">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-icon><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
      With Icon Left
    </Button>
    <Button variant="default">
      With Icon Right
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-icon><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
    </Button>
  </div>

All Variants Grid

  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
    <Button variant="default">Default</Button>
    <Button variant="outline">Outline</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="ghost">Ghost</Button>
    <Button variant="destructive">Destructive</Button>
    <Button variant="link">Link</Button>
    <Button variant="inverted">Inverted</Button>
    <Button variant="dottedUnderline">Dotted</Button>
  </div>

On this page