Toggle

A two-state button that can be either on or off.

## Installation

npm

npx @galaxy-stack/nebula-cli@latest add toggle

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add toggle

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add toggle

bun

bunx @galaxy-stack/nebula-cli@latest add toggle

global

# If you have installed galaxy-design globally
galaxy-design add toggle

Usage

Vue

<script setup lang="ts">
import { Toggle } from '@/components/ui/toggle'
import { Bold } from 'lucide-vue-next'
</script>

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

React

import { Toggle } from "@/components/ui/toggle"
import { Bold } from "lucide-react"

export default function App() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
}

Angular

import { Component } from '@angular/core';
import { ToggleComponent } from '@/components/ui/toggle';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ToggleComponent],
  template: `
    <ui-toggle aria-label="Toggle bold">
      <lucide-icon name="bold" class="h-4 w-4"></lucide-icon>
    </ui-toggle>
  `
})
export class AppComponent {}

Examples

Default

Vue

<Toggle>
  <Bold class="h-4 w-4" />
</Toggle>

React

<Toggle>
  <Bold className="h-4 w-4" />
</Toggle>

Angular

<ui-toggle>
  <lucide-icon name="bold" class="h-4 w-4"></lucide-icon>
</ui-toggle>

Outline

Vue

<Toggle variant="outline">
  <Italic class="h-4 w-4" />
</Toggle>

React

<Toggle variant="outline">
  <Italic className="h-4 w-4" />
</Toggle>

Angular

<ui-toggle variant="outline">
  <lucide-icon name="italic" class="h-4 w-4"></lucide-icon>
</ui-toggle>

With Text

Vue

<Toggle>
  <Italic class="mr-2 h-4 w-4" />
  Italic
</Toggle>

React

<Toggle>
  <Italic className="mr-2 h-4 w-4" />
  Italic
</Toggle>

Angular

<ui-toggle>
  <lucide-icon name="italic" class="mr-2 h-4 w-4"></lucide-icon>
  Italic
</ui-toggle>

Small

Vue

<Toggle size="sm">
  <Italic class="h-4 w-4" />
</Toggle>

React

<Toggle size="sm">
  <Italic className="h-4 w-4" />
</Toggle>

Angular

<ui-toggle size="sm">
  <lucide-icon name="italic" class="h-4 w-4"></lucide-icon>
</ui-toggle>

Large

Vue

<Toggle size="lg">
  <Italic class="h-4 w-4" />
</Toggle>

React

<Toggle size="lg">
  <Italic className="h-4 w-4" />
</Toggle>

Angular

<ui-toggle size="lg">
  <lucide-icon name="italic" class="h-4 w-4"></lucide-icon>
</ui-toggle>

Disabled

Vue

<Toggle disabled>
  <Underline class="h-4 w-4" />
</Toggle>

React

<Toggle disabled>
  <Underline className="h-4 w-4" />
</Toggle>

Angular

<ui-toggle [disabled]="true">
  <lucide-icon name="underline" class="h-4 w-4"></lucide-icon>
</ui-toggle>

API Reference

Props

Prop	Type	Default	Description	Frameworks
pressed	boolean	-	Controlled pressed state	All
defaultPressed	boolean	false	Initial pressed state for uncontrolled usage	All
onPressedChange	(pressed: boolean) => void	-	Called when pressed state changes	All
disabled	boolean	false	Disables the toggle	All
variant	'default' | 'outline'	'default'	Visual style variant	All
size	'default' | 'sm' | 'lg'	'default'	Size variant	All
asChild	boolean	false	Render as child element	React, Vue, Angular
className	string	''	Additional CSS classes	All

Accessibility

Keyboard Interactions

Key	Description
Space	Toggles the component on and off
Enter	Toggles the component on and off

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)