@page "/components/togglebutton"

@page "/components/toggle-button"

<PageOutlet Url="components/togglebutton"

Title="ToggleButton"

Description="ToggleButton is a type of button that stores and shows a status representing the toggle state of the component." />

<DemoPage Name="ToggleButton"

Description="ToggleButton is a type of button that stores and shows a status representing the toggle state of the component."

Parameters="componentParameters"

SubClasses="componentSubClasses"

SubEnums="componentSubEnums"

GitHubUrl="Buttons/ToggleButton/BitToggleButton.razor"

GitHubDemoUrl="Buttons/ToggleButton/BitToggleButtonDemo.razor">

<DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">

<div>See the basic usage of a BitToggleButton in action.</div><br />

<BitToggleButton>Microphone</BitToggleButton>

</DemoExample>

<DemoExample Title="Variant" RazorCode="@example2RazorCode" Id="example2">

<div>The BitToggleButton offers three variants: Fill (default), Outline, and Text.</div><br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill">Fill</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline">Outline</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text">Text</BitToggleButton>

</div>

<br /><br />

<div>Disabled:</div><br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" IsEnabled="false">Fill</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" IsEnabled="false">Outline</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" IsEnabled="false">Text</BitToggleButton>

</div>

</DemoExample>

<DemoExample Title="Texts" RazorCode="@example3RazorCode" Id="example3">

<div>You can provide the text of the BitToggleButton in different ways.</div><br />

<div>Text:</div><br/>

<BitToggleButton Text="Microphone" />

<br/><br/><br/><br/>

<div>On/Off Texts:</div><br/>

<BitToggleButton OnText="Muted" OffText="Unmuted" />

</DemoExample>

<DemoExample Title="Icons" RazorCode="@example4RazorCode" Id="example4">

<div>Checkout different ways of utilizing Icons in BitToggleButton.</div><br />

<div>IconName:</div><br/>

<BitToggleButton Text="Microphone" IconName="@BitIconName.Microphone" />

<br/><br/><br/><br/>

<div>On/Off IconNames:</div><br/>

<BitToggleButton OnText="Muted" OnIconName="@BitIconName.MicOff"

OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

<br/><br/><br/><br/>

<div>No text:</div><br/>

<div class="example-box">

<BitToggleButton IconName="@BitIconName.Microphone" />

<BitToggleButton OnIconName="@BitIconName.MicOff" OffIconName="@BitIconName.Microphone" />

</div>

<br/><br/><br/>

<div>IconOnly:</div><br/>

<div class="example-box">

<BitToggleButton IconOnly IconName="@BitIconName.Microphone" Text="Microphone" />

<BitToggleButton IconOnly

OnText="Muted" OnIconName="@BitIconName.MicOff"

OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

</div>

</DemoExample>

<DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">

<div>Explore default checked state, two-way binding, and handling change events for a customizable user experience.</div><br />

<div>DefaultIsChecked:</div><br />

<BitToggleButton DefaultIsChecked="true"

OnText="Muted" OnIconName="@BitIconName.MicOff"

OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

<br /><br /><br /><br />

<div>Two-way bound:</div><br />

<BitToggleButton @bind-IsChecked="twoWayBoundValue"

Text="@(twoWayBoundValue ? "Muted" : "Unmuted")"

IconName="@(twoWayBoundValue ? BitIconName.MicOff : BitIconName.Microphone)" />

<br /><br />

<BitCheckbox Label="Checked Toggle Button" @bind-Value="twoWayBoundValue" />

<br /><br /><br /><br />

<div>OnChange:</div><br />

<BitToggleButton OnChange="v => onChangeValue = v"

OnText="Muted" OnIconName="@BitIconName.MicOff"

OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

<br /><br />

<div>Check status: @onChangeValue</div>

</DemoExample>

<DemoExample Title="Templates" RazorCode="@example6RazorCode" Id="example6">

<div>Here are some examples of customizing the BitToggleButton content.</div><br />

<BitToggleButton>

<div class="custom-template">

<BitIcon IconName="@BitIconName.Airplane" Color="BitColor.Tertiary" />

<span>Custom template</span>

<BitRollerLoading CustomSize="20" Color="BitColor.Tertiary" />

</div>

</BitToggleButton>

</DemoExample>

<DemoExample Title="Events" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">

<div>Managing BitToggleButton click event (OnClick).</div><br />

<BitToggleButton OnClick="() => clickCounter++">

Click me (@clickCounter)

</BitToggleButton>

</DemoExample>

<DemoExample Title="Size" RazorCode="@example8RazorCode" Id="example8">

<div>Varying sizes for BitToggleButton tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>

<br /><br />

<div><b>Small</b>:</div><br/>

<div class="example-box">

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" Text="Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br />

<div class="example-box">

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" Text="Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br />

<div class="example-box">

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" Text="Microphone" />

<BitToggleButton Size="BitSize.Small" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br /><br /><br /><br />

<div><b>Medium</b>:</div><br/>

<div class="example-box">

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" Text="Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br />

<div class="example-box">

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" Text="Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br />

<div class="example-box">

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" Text="Microphone" />

<BitToggleButton Size="BitSize.Medium" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br /><br /><br /><br />

<div><b>Large</b>:</div><br /><br/>

<div class="example-box">

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" Text="Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Fill" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br />

<div class="example-box">

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" Text="Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Outline" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

<br />

<div class="example-box">

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" Text="Microphone" />

<BitToggleButton Size="BitSize.Large" Variant="BitVariant.Text" IconName="@BitIconName.Microphone" Text="Microphone" />

</div>

</DemoExample>

<DemoExample Title="Color" RazorCode="@example9RazorCode" Id="example9">

<div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div><br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Primary">Primary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Primary">Primary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Primary">Primary</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Secondary">Secondary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Secondary">Secondary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Secondary">Secondary</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Tertiary">Tertiary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Tertiary">Tertiary</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Tertiary">Tertiary</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Info">Info</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Info">Info</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Info">Info</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Success">Success</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Success">Success</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Success">Success</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Warning">Warning</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Warning">Warning</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Warning">Warning</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SevereWarning">SevereWarning</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.Error">Error</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.Error">Error</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.Error">Error</BitToggleButton>

</div>

<br />

<div style="background:var(--bit-clr-fg-sec);padding:1rem">

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryBackground">PrimaryBackground</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryBackground">SecondaryBackground</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryBackground">TertiaryBackground</BitToggleButton>

</div>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryForeground">PrimaryForeground</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryForeground">SecondaryForeground</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryForeground">TertiaryForeground</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.PrimaryBorder">PrimaryBorder</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.SecondaryBorder">SecondaryBorder</BitToggleButton>

</div>

<br />

<div class="example-box">

<BitToggleButton Variant="BitVariant.Fill" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Outline" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>

<BitToggleButton Variant="BitVariant.Text" Color="BitColor.TertiaryBorder">TertiaryBorder</BitToggleButton>

</div>

</DemoExample>

<DemoExample Title="FixedColor" RazorCode="@example10RazorCode" Id="example10">

<div>FixedColor parameter preserves the foreground color between hovering and focused states.</div><br />

<div class="example-box">

<BitToggleButton Color="BitColor.TertiaryBackground" FixedColor

OnIconName="@BitIconName.MicOff" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Color="BitColor.TertiaryBackground" FixedColor

OnText="Muted" OnIconName="@BitIconName.MicOff"

OffText="Unmuted" OffIconName="@BitIconName.Microphone" />

</div>

</DemoExample>

<DemoExample Title="External Icons" RazorCode="@example11RazorCode" Id="example11">

<div>Use icons from external libraries like FontAwesome with the <b>Icon</b>, <b>OnIcon</b>, and <b>OffIcon</b> parameters.</div>

<br />

<br />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />

<BitToggleButton Icon="@("fa-solid fa-microphone")" Text="Microphone" />

<br/>

<br/>

<BitToggleButton OnIcon="@BitIconInfo.Css("fa-solid fa-microphone-slash")" OnText="Muted"

OffIcon="@BitIconInfo.Css("fa-solid fa-microphone")" OffText="Unmuted"

Color="BitColor.Secondary" />

<br/>

<br/>

<BitToggleButton OnIcon="@BitIconInfo.Fa("solid volume-xmark")" OnText="Muted"

OffIcon="@BitIconInfo.Fa("solid volume-high")" OffText="Unmuted"

Color="BitColor.Tertiary" />

<br/>

<br/>

<BitToggleButton OnIcon="@BitIconInfo.Fa("fa-regular fa-circle-pause")" OnText="Paused"

OffIcon="@BitIconInfo.Fa("fa-regular fa-circle-play")" OffText="Playing"

Color="BitColor.Success" />

</DemoExample>

<DemoExample Title="Style & Class" RazorCode="@example12RazorCode" Id="example12">

<div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div><br />

<div>Component's Style & Class:</div><br />

<div class="example-box">

<BitToggleButton Style="background-color: transparent; border-color: blueviolet; color: blueviolet;"

Variant="BitVariant.Outline"

OnText="Styled Button: Muted" OnIconName="@BitIconName.MicOff"

OffText="Styled Button: Unmuted" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Class="custom-class"

OnText="Classed Button: Muted" OnIconName="@BitIconName.MicOff"

OffText="Classed Button: Unmuted" OffIconName="@BitIconName.Microphone" />

</div>

<br /><br />

<div>Styles & Classes:</div><br />

<div class="example-box">

<BitToggleButton OnText="Styled Button: Muted" OnIconName="@BitIconName.MicOff"

OffText="Styled Button: Unmuted" OffIconName="@BitIconName.Microphone"

Styles="@(new() { Root = "--toggle-background: pink; background: var(--toggle-background); border: none;",

Checked = "--toggle-background: peachpuff;",

Icon = "color: red;",

Text = "color: tomato;" })" />

<BitToggleButton Variant="BitVariant.Text"

OnText="Classed Button: Muted" OnIconName="@BitIconName.MicOff"

OffText="Classed Button: Unmuted" OffIconName="@BitIconName.Microphone"

Classes="@(new() { Root = "custom-root",

Checked = "custom-checked",

Icon = "custom-icon",

Text = "custom-text" })" />

</div>

</DemoExample>

<DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">

<div>Use BitToggleButton in right-to-left (RTL).</div>

<br />

<div class="example-box" dir="rtl">

<BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Fill"

OnText="صدا قطع" OnIconName="@BitIconName.MicOff"

OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Outline"

OnText="صدا قطع" OnIconName="@BitIconName.MicOff"

OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

<BitToggleButton Dir="BitDir.Rtl" Variant="BitVariant.Text"

OnText="صدا قطع" OnIconName="@BitIconName.MicOff"

OffText="صدا وصل" OffIconName="@BitIconName.Microphone" />

</div>

</DemoExample>

</DemoPage>