Button

Trigger an action or event, in multiple variants and sizes.

import { BuiButton } from 'ng-blatui';

<button buiButton>Button</button>

Variants

<button buiButton>Default</button>
<button buiButton variant="secondary">Secondary</button>
<button buiButton variant="destructive">Destructive</button>
<button buiButton variant="outline">Outline</button>
<button buiButton variant="ghost">Ghost</button>
<button buiButton variant="link">Link</button>

Sizes

<button buiButton size="xs">Extra small</button>
<button buiButton size="sm">Small</button>
<button buiButton>Default</button>
<button buiButton size="lg">Large</button>

With icon

<button buiButton variant="outline"><svg><!-- mail --></svg> Login with Email</button>
<button buiButton><svg><!-- download --></svg> Download</button>

Loading

<button buiButton disabled>
  <svg class="animate-spin"><!-- spinner --></svg> Please wait
</button>

Pill

<button buiButton class="rounded-full">Get started</button>
<button buiButton variant="outline" class="rounded-full">Learn more</button>
<button buiButton size="icon" variant="outline" class="rounded-full" aria-label="Like">…</button>

Gradient

<button
  buiButton
  class="border-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white shadow-lg hover:opacity-90"
>
  <svg><!-- sparkles --></svg> Gradient
</button>

Social

<button buiButton variant="outline"><svg><!-- github --></svg> Continue with GitHub</button>
<button buiButton variant="outline"><svg><!-- google --></svg> Continue with Google</button>

Custom color

Badge

<!-- recolor a region by overriding the tokens -->
<div style="--primary: #be185d; --primary-foreground: #fff; --ring: #be185d">
  <button buiButton>Primary</button>
  <button buiButton variant="outline">Outline</button>
</div>

As link

Link button Visit docs

<a buiButton href="/docs" variant="link">Link button</a>
<a buiButton href="/docs" variant="outline"><svg><!-- external --></svg> Visit docs</a>

Icon sizes

<button buiButton size="icon-xs" variant="outline" aria-label="Favourite">…</button>
<button buiButton size="icon-sm" variant="outline" aria-label="Add">…</button>
<button buiButton size="icon" variant="outline" aria-label="Settings">…</button>
<button buiButton size="icon-lg" variant="outline" aria-label="Star">…</button>

Icon before & after

<button buiButton variant="outline">
  <svg><!-- leading --></svg> Dashboard <svg><!-- trailing --></svg>
</button>