Toggle

Neobrutalist-styled toggle button built on reka-ui's Toggle primitive, with pressed state support.

Demo

Preview

默认变体

轮廓变体

尺寸

禁用

加载中

Installation

pnpm dlx brutx-vue@latest add toggle

Usage

Basic Usage

<script setup>
import { ref } from 'vue'
import { Toggle } from 'brutx-ui-vue'
import { Bold, Italic, Underline } from '@lucide/vue'

const bold = ref(false)
const italic = ref(false)
const underline = ref(false)
</script>

<template>
    <div class="flex items-center gap-2">
        <Toggle v-model="bold" variant="default" size="default">
            <Bold class="h-4 w-4" />
        </Toggle>
        <Toggle v-model="italic" variant="default" size="default">
            <Italic class="h-4 w-4" />
        </Toggle>
        <Toggle v-model="underline" variant="default" size="default">
            <Underline class="h-4 w-4" />
        </Toggle>
    </div>
</template>

Loading State

Display a loading indicator (Loader2 spinning icon) via the loading prop. The button is automatically disabled and sets aria-busy="true", suitable for async operation scenarios. During loading, the original slot content is replaced with the spinning icon.

<script setup>
import { Toggle } from 'brutx-ui-vue'
import { Bold } from '@lucide/vue'
</script>

<template>
    <Toggle loading aria-label="Bold">
        <Bold class="h-4 w-4" />
    </Toggle>
</template>

Accessibility Label

Toggle does not automatically generate a default aria-label. When slot content is icon-only, it is recommended to provide readable text via the ariaLabel prop so screen readers can correctly announce the button's purpose.

<script setup>
import { ref } from 'vue'
import { Toggle } from 'brutx-ui-vue'
import { Bold } from '@lucide/vue'

const bold = ref(false)
</script>

<template>
    <Toggle v-model="bold" aria-label="Bold">
        <Bold class="h-4 w-4" />
    </Toggle>
</template>

Variants

Variant	Description
default	With background and small shadow, primary color background when pressed
outline	Transparent with border, secondary color background when pressed

Sizes

Size	Height	Min Width	Font Size
sm	h-8	min-w-8	text-xs
default	h-10	min-w-10	text-sm
lg	h-12	min-w-12	text-sm

API Reference

Toggle — Props

Name	Type	Default	Description
modelValue	boolean | undefined	—	The current pressed state, controlled with v-model.
Details Declared type boolean | undefined Literal values false true Default value details Not declared — Source Toggle.vue:13 packages/ui/src/components/toggle/Toggle.vue
variant	"default" | "outline" | undefined	"default"	Sets the visual variant of the Toggle.
Details Declared type NonNullable<"default" | "outline" | null | undefined> | undefined Literal values "default" "outline" Default value details Declaration 'default' Source: packages/ui/src/components/toggle/Toggle.vue Resolved value "default" Source Toggle.vue:14 packages/ui/src/components/toggle/Toggle.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the size of the Toggle button.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/toggle/Toggle.vue Resolved value "default" Source Toggle.vue:15 packages/ui/src/components/toggle/Toggle.vue
disabled	boolean | undefined	false	Disables button interaction.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/toggle/Toggle.vue Resolved value false Source Toggle.vue:16 packages/ui/src/components/toggle/Toggle.vue
loading	boolean | undefined	false	Shows a loading indicator and disables interaction; the loading state replaces default-slot content.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/toggle/Toggle.vue Resolved value false Source Toggle.vue:17 packages/ui/src/components/toggle/Toggle.vue
class	string | undefined	undefined	CSS classes added to the Toggle root button.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/toggle/Toggle.vue Resolved value undefined Source Toggle.vue:18 packages/ui/src/components/toggle/Toggle.vue
ariaLabel	string | undefined	undefined	Sets the Toggle’s accessible name; provide it for icon-only buttons.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/toggle/Toggle.vue Resolved value undefined Source Toggle.vue:20 packages/ui/src/components/toggle/Toggle.vue

Toggle — Events

Name	Signature or type	Description
@update:modelValue	[value: boolean]	Emits the new boolean when the user changes the pressed state.
Details Declared type [value: boolean] Literal values false true Source Toggle.vue packages/ui/src/components/toggle/Toggle.vue

Toggle — Slots

Name	Signature or type	Description
#default	{}	Text, an icon, or other button content; replaced by the loading indicator while loading is true.
Details Declared type {} Source Toggle.vue packages/ui/src/components/toggle/Toggle.vue

Accessibility

• Keyboard: Supports Space / Enter to trigger toggle
• ARIA attributes: Automatically manages aria-pressed state; sets aria-busy="true" during loading
• Accessibility label: Toggle does not automatically generate a default aria-label; when slot content is icon-only, provide readable text via the ariaLabel prop