Docs
Toggle
Toggle
A two-state button that can be either on or off.
Loading...
Loading...
import { UbToggleDirective } from '@/components/ui/toggle'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideBold } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'toggle-demo-new-york',
imports: [UbToggleDirective, NgIconComponent],
viewProviders: [provideIcons({ lucideBold })],
template: `
<button ubToggle>
<ng-icon name="lucideBold" class="h-4 w-4"></ng-icon>
</button>
`,
})
export class ToggleDemoNewYork { }import { UbToggleDirective } from '@/components/ui/toggle'
import { Component } from '@angular/core'
import { NgIconComponent, provideIcons } from '@ng-icons/core'
import { lucideBold } from '@ng-icons/lucide'
@Component({
standalone: true,
selector: 'toggle-demo-default',
imports: [UbToggleDirective, NgIconComponent],
viewProviders: [provideIcons({ lucideBold })],
template: `
<button ubToggle>
<ng-icon name="lucideBold" class="h-4 w-4"></ng-icon>
</button>
`,
})
export class ToggleDemoDefault { }Installation
npx shadcn-ng@latest add toggle
npm
yarn
pnpm
bun
Install the following dependencies:
npm install @radix-ng/primitives
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import type { VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
import { RdxToggleDirective } from '@radix-ng/primitives/toggle'
import { cva } from 'class-variance-authority'
const toggleVariants = cva(
'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{
variants: {
variant: {
default: 'bg-transparent',
outline:
'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
},
size: {
default: 'h-9 px-2 min-w-9',
sm: 'h-8 px-1.5 min-w-8',
lg: 'h-10 px-2.5 min-w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
)
@Directive({
standalone: true,
selector: 'button[ubToggle]',
host: {
'[class]': 'computedClass()',
},
hostDirectives: [RdxToggleDirective],
})
export class UbToggleDirective {
variant = input<VariantProps<typeof toggleVariants>['variant']>()
size = input<VariantProps<typeof toggleVariants>['size']>()
class = input<string>()
computedClass = computed(() => cn(
toggleVariants({
variant: this.variant(),
size: this.size(),
className: this.class(),
}),
))
}import type { VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
import { RdxToggleDirective } from '@radix-ng/primitives/toggle'
import { cva } from 'class-variance-authority'
const toggleVariants = cva(
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
{
variants: {
variant: {
default: 'bg-transparent',
outline:
'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
},
size: {
default: 'h-10 px-3 min-w-10',
sm: 'h-9 px-2.5 min-w-9',
lg: 'h-11 px-5 min-w-11',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
)
@Directive({
standalone: true,
selector: 'button[ubToggle]',
host: {
'[class]': 'computedClass()',
},
hostDirectives: [RdxToggleDirective],
})
export class UbToggleDirective {
variant = input<VariantProps<typeof toggleVariants>['variant']>()
size = input<VariantProps<typeof toggleVariants>['size']>()
class = input<string>()
computedClass = computed(() => cn(
toggleVariants({
variant: this.variant(),
size: this.size(),
className: this.class(),
}),
))
}Update the import paths to match your project setup.
Usage
import { UbToggleDirective } from "@/components/ui/toggle"<button ubToggle>Toggle</button>