Toggles are a group of selectable options that are related to each other. The options are contained within a single component and one option is always selected by default. Toggles are available in default and small sizes.
Toggles are made up of a background container with a smaller container inside that holds either text or icons.
Toggles always contain one active state with at least one or more inactive or disabled states.
In order to maintain visual balance, we recommend not providing any padding between toggles. This allows the user to perceive its connectivity.
Similar to Tabs, Toggles are used to hide smaller sets of data under this system which can be displayed per the users interaction.
Adequate margins between Toggle component and other components is important to maintaining discoverability and scannability. We recommend maintaining a minimum 20 pixel margin between Tabs and other components.
Denali’s components are completely themeable. This allows you to use our framework and adapt the visual style of Denali’s components to match your prodcut’s unique visual brand. Check out our guide to themeing with Denali to find out more.
Dennit Racing uses a customized Denali theme that aligns visually with their brand. Dennit’s List features custom type and color theming.
For all variables visit the CSS documentation page for toggle.