Button

Button or anchor

Three variants, one job each: solid is the action, outline the alternative beside it, ghost the tertiary thing you'd otherwise make a link. Colour means chosen: every button is ink at rest and fills with the accent while pressed, so the main action stands out by being solid, not by colour. Hover fades and leans; focus leans with the accent ring; pressing fills. color="accent" is for a button that shows something already chosen — for a choice that stays on, use Toggle, which carries aria-pressed and fills itself; danger for destructive — and if the action can be undone, do it and offer Undo from a Toaster rather than asking first; text (default) for the rest. type defaults to button, so a button inside a form doesn't submit by accident — say type="submit" when it should.

href renders an <a> (or your router's link) with the same look; disabled on a link is enforced — no navigation, out of the tab order. loading shows a spinner, sets aria-busy and ignores clicks while keeping focus, so a keyboard user stays on the button they pressed. A disabled or loading button doesn't pass its click on to your @click. block fills the container; icon makes the padding square for an icon-only button — give it an aria-label.

Basic

<script setup lang="ts">
import { BlessButton } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessButton>Solid</BlessButton>
    <BlessButton variant="outline">Outline</BlessButton>
    <BlessButton variant="ghost">Ghost</BlessButton>
    <BlessButton color="danger">Danger</BlessButton>
    <BlessButton variant="outline" color="danger">Outline danger</BlessButton>
  </div>
</template>

Sizes

<script setup lang="ts">
import { BlessButton } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessButton size="sm">Small</BlessButton>
    <BlessButton size="md">Medium</BlessButton>
    <BlessButton size="lg">Large</BlessButton>
  </div>
</template>

States

LinkDisabled link

<script setup lang="ts">
import { BlessButton } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessButton href="#">Link</BlessButton>
    <BlessButton disabled>Disabled</BlessButton>
    <BlessButton loading>Saving</BlessButton>
    <BlessButton><template #prefix>▶</template>Play</BlessButton>
    <BlessButton icon aria-label="Settings" variant="outline">⚙</BlessButton>
    <BlessButton href="#" disabled>Disabled link</BlessButton>
  </div>
  <BlessButton block style="margin-top: 12px">Block — full width</BlessButton>
</template>

Usage

import { BlessButton } from "blessing-ui";

API

Props

Name	Type	Default	Description
variant	"solid" | "outline" | "ghost"	"solid"
color	"text" | "accent" | "danger"	"text"
size	"md" | "sm" | "lg"	"md"
href	string	—	renders <a> when set
disabled	boolean	—
loading	boolean	—
type	"button" | "submit" | "reset"	"button"
block	boolean	—	full width of its container
icon	boolean	—	icon-only: equal padding all round — pass an aria-label

Events

Name	Payload	Description
click	[e: MouseEvent]

Slots

Name	Scope	Description
prefix	—
default	—
suffix	—