Toggle

A two-state button that can be pressed and unpressed.

Default

The default variant is lightweight and ideal when a toggle should blend into nearby controls while still showing clear on/off state.

Source

<RzToggle aria-label="Toggle bookmark">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>

Outline

The outline variant adds a visible boundary that works well in toolbars and settings panels where controls need stronger separation.

Source

<RzToggle Variant="ToggleVariant.Outline" aria-label="Toggle bookmark">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>

With Text

Text labels improve scanability when multiple formatting actions are shown together, while the icon preserves quick visual recognition.

Source

<RzToggle Variant="ToggleVariant.Outline" aria-label="Toggle bold text">
    <Blazicon Svg="Lucide.Bold" class="mr-2 size-4" />
    Bold
</RzToggle>
<RzToggle Variant="ToggleVariant.Outline" aria-label="Toggle italic text">
    <Blazicon Svg="Lucide.Italic" class="mr-2 size-4" />
    Italic
</RzToggle>
<RzToggle Variant="ToggleVariant.Outline" aria-label="Toggle underline text">
    <Blazicon Svg="Lucide.Underline" class="mr-2 size-4" />
    Underline
</RzToggle>

Sizes

Choose a size that matches your layout density. Small fits compact toolbars, while large gives touch-friendly targets.

Source

<RzToggle Variant="ToggleVariant.Outline" Size="ToggleSize.Small" aria-label="Small bookmark toggle">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>
<RzToggle Variant="ToggleVariant.Outline" Size="ToggleSize.Default" aria-label="Default bookmark toggle">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>
<RzToggle Variant="ToggleVariant.Outline" Size="ToggleSize.Large" aria-label="Large bookmark toggle">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>

Disabled

Disabled toggles communicate unavailable actions. You can still render a pressed disabled state to indicate a locked selection.

Source

<RzToggle Variant="ToggleVariant.Outline" Disabled aria-label="Disabled bookmark toggle">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>
<RzToggle Variant="ToggleVariant.Outline" Disabled Pressed="true" aria-label="Disabled pressed bookmark toggle">
    <Blazicon Svg="Lucide.Bookmark" class="mr-2 size-4" />
    Bookmark
</RzToggle>

RzToggle Component Parameters

Property	Description	Type	Default
`Variant`	`ToggleVariant` – Selects the visual style of the toggle (`Default` or `Outline`).	`ToggleVariant`	`ToggleVariant.Default`
`Size`	`ToggleSize` – Controls toggle dimensions (`Small`, `Default`, `Large`).	`ToggleSize`	`ToggleSize.Default`
`Pressed`	`bool?` – Optional controlled state. When set, the toggle reflects this value.	`bool?`	`null`
`DefaultPressed`	`bool` – Initial pressed state used in uncontrolled mode.	`bool`	`false`
`Disabled`	`bool` – Prevents interaction and applies disabled styling.	`bool`	`false`
`ChildContent`	`RenderFragment?` – Content rendered inside the toggle, typically an icon and label.	`RenderFragment?`	`null`

Alpine API

This page uses the rzToggle Alpine x-data component.

Method	Parameters	Description
`toggle`	`—`	Toggles the current on/off state.
`state`	`—`	Returns current state as a string representation.