Φ ToggleBtn
Last updated
Last updated
Primitive: A single on/off toggle button with the appearance of the button. Toggles can be set to act the same as a radio button (one selection at a time), or checkboxes (multiple selections). Most often seen in a group of toggle buttons (Toggle - Ctrl), they can however exist as a single button toggle on/off as well.
Parent: ToggleCtrl
Child: Label
Text: The text and text with icon either left or right.
Icon: The icon only appearance to a toggle button. This is used in many toolbar situations like with a text editor toolbar.
The same styles that are possible in the Button element are available here.
Primary
Secondary
Light
Neutral
Dark
This property defines if the toggle is set to the "On" or "Off" version. Buttons that have a status of "on" show as fills and those that are "off" have a line outlining the button shape.
NOTE: The intent is to NOT have double lines between each ToggleBtn (as is shown in the design file) when they are grouped together. However, this would complicate the design file more than we'd like, so understand that the right side "lines" of the Left and Center "Locations" should be removed to achieve the desired effect of a single 1 dp line between each piece.
This is primarily for the multi-toggle option to define the left, center, and right toggles, but we also include the appearance of the toggle when a single toggle button is present.
We have the need for two sizes in the Toggle, the first Base (default) size for most use cases and a shorter one "Tiny" for those situations where the Toggle shows up in other fixed height components like in the App Bar.
Enabled
Disabled
Hover
Pressed
Focus
