Toggle

Pressed buttons

A button that stays pressed — bold in a toolbar, a filter that's on. For a setting that applies at once, a Switch reads clearer; for a set of them, wrap toggles in a ToggleGroup.

Basic

<script setup lang="ts">
import { ref } from "vue";
import { BlessToggle } from "blessing-ui";
const bold = ref(false);
const pinned = ref(true);
</script>

<template>
  <div class="row">
    <BlessToggle v-model:pressed="bold">Bold</BlessToggle>
    <BlessToggle v-model:pressed="pinned">Pinned</BlessToggle>
    <BlessToggle size="sm" disabled>Archived</BlessToggle>
  </div>
</template>

Group Basic

align: left · fmt: [ "b", "i" ]

<script setup lang="ts">
import { ref } from "vue";
import { BlessToggle, BlessToggleGroup } from "blessing-ui";
const align = ref<string | undefined>("left");
const fmt = ref<string[]>(["b", "i"]);
</script>

<template>
  <div class="row">
    <BlessToggleGroup v-model="align" label="Align">
      <BlessToggle value="left" label="Align left">L</BlessToggle>
      <BlessToggle value="center" label="Align centre">C</BlessToggle>
      <BlessToggle value="right" label="Align right">R</BlessToggle>
    </BlessToggleGroup>
    <BlessToggleGroup v-model="fmt" type="multiple" label="Format">
      <BlessToggle value="b" label="Bold">B</BlessToggle>
      <BlessToggle value="i" label="Italic">I</BlessToggle>
      <BlessToggle value="u" label="Underline">U</BlessToggle>
    </BlessToggleGroup>
    <small>align: {{ align }} · fmt: {{ fmt }}</small>
  </div>
</template>

• It is a <button aria-pressed>, so it's read as "Bold, toggle button, pressed".
• An icon-only toggle needs label.
• In a ToggleGroup, type="single" allows one at a time (click the pressed one again to clear) and type="multiple" any number; give the group a label.

Usage

import { BlessToggle, BlessToggleGroup } from "blessing-ui";

API

BlessToggle

Props

Name	Type	Default	Description
value	string | number	—	required inside a BlessToggleGroup
size	"md" | "sm" | "lg"	"md"
color	"text" | "accent" | "danger"	"accent"
disabled	boolean	—
label	string	—
pressed	boolean	false

Events

Name	Payload	Description
update:pressed	[value: boolean]

Slots

Name	Scope	Description
default	—

BlessToggleGroup

Props

Name	Type	Default	Description
type	"single" | "multiple"	"single"
disabled	boolean	—
label	string	—
modelValue	T | T[]	—

Events

Name	Payload	Description
update:modelValue	[value: T | T[] | undefined]

Slots

Name	Scope	Description
default	—