Toggle

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download toggle -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {
  "variant": "default",
  "size": "default",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "outline";
    size?: "default" | "sm" | "lg";
  };
</script>

<template>
  <Toggle aria-label="Toggle bold" v-bind="args"><Icon name="Bold" /></Toggle>
</template>

Examples

Default

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Toggle v-bind="args" aria-label="Toggle bold"><Icon name="Bold" /></Toggle>
</template>

Outline

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Toggle variant="outline" aria-label="Toggle italic"
    ><Icon name="Italic"
  /></Toggle>
</template>

With Text

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Toggle aria-label="Toggle italic"><Icon name="Italic" /> Italic</Toggle>
</template>

Small

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Toggle size="sm" aria-label="Toggle bold"><Icon name="Bold" /></Toggle>
</template>

Large

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Toggle size="lg" aria-label="Toggle bold"><Icon name="Bold" /></Toggle>
</template>

Disabled

<script setup lang="ts">
import { Toggle } from "@/components/ui/toggle";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle";

const Component = UI.Toggle;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Toggle disabled aria-label="Toggle bold"><Icon name="Bold" /></Toggle>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.