<div class="flex flex-col items-center py-6">
<Toggle aria-label="Toggle bookmark"
Size="sm"
Variant="outline"
Class="[&[data-state=on]_svg]:fill-black [&[data-state=on]_svg]:stroke-black"
Pressed="true">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
Bookmark
</Toggle>
</div>Installation
Install the toggle component using the command or manual steps.
blazor-shadcn add toggleUsage
@using ShadcnBlazor.Components.UI<Toggle>Toggle</Toggle>Examples
Outline
Use Variant="outline" for an outline style.
<div class="flex flex-col items-center py-6">
<Toggle Variant="outline" aria-label="Toggle italic">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
<line x1="19" x2="10" y1="4" y2="4" />
<line x1="14" x2="5" y1="20" y2="20" />
<line x1="15" x2="9" y1="4" y2="20" />
</svg>
</Toggle>
</div>With Text
<div class="flex flex-col items-center py-6">
<Toggle aria-label="Toggle italic">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="19" x2="10" y1="4" y2="4" />
<line x1="14" x2="5" y1="20" y2="20" />
<line x1="15" x2="9" y1="4" y2="20" />
</svg>
Italic
</Toggle>
</div>Size
Use the Size parameter to change the size of the toggle.
<div class="flex flex-wrap items-center justify-center gap-2 py-6">
<Toggle Variant="outline" Size="sm">Small</Toggle>
<Toggle Variant="outline">Default</Toggle>
<Toggle Variant="outline" Size="lg">Large</Toggle>
</div>Disabled
<div class="flex flex-wrap items-center justify-center gap-2 py-6">
<Toggle aria-label="Toggle disabled" Disabled="true">
Disabled
</Toggle>
<Toggle Variant="outline" aria-label="Toggle disabled outline" Disabled="true">
Disabled
</Toggle>
</div>