Toggle button is a custom element that allows users to toggle between two states.
To make the button acitve use the active attribute. With a native button you can use the aria-pressed attribute also.
You can change the shape of the toggle button by using the shape attribute.
import { DapDSToggleButton } from 'dap-design-system'
import { DapDSToggleButtonReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSToggleButton } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
active | boolean | false | Whether the button is active. |
shape | 'button', 'circle' | 'button' | The shape of the button |
sizeChildren | string | 'true' | |
size | 'xs', 'sm' , 'md' , 'lg' | 'md' | The size of the toggle button. Default is md |
sizeMap | string | Responsive size map (e.g. "md:lg") |
| Name | Description |
|---|---|
(default) | The content of the toggle button. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main button container. |
high-contrast | The high contrast part of the button. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-toggle-button::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-toggle-button::part(base),
.my-custom-dap-ds-toggle-button::part(high-contrast) {
/* Shared styles */
}
Example usage:
<dap-ds-toggle-button class="my-custom-dap-ds-toggle-button">
Toggle button
</dap-ds-toggle-button>
.my-custom-dap-ds-toggle-button::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-toggle-button-min-width-lg | Minimum width of the large toggle button (default: var(--dds-spacing-2400)) |
--dds-toggle-button-min-width-md | Minimum width of the medium toggle button (default: var(--dds-spacing-2000)) |
--dds-toggle-button-min-width-sm | Minimum width of the small toggle button (default: var(--dds-spacing-1200)) |
--dds-toggle-button-min-width-xs | Minimum width of the extra small toggle button (default: var(--dds-spacing-1200)) |
--dds-toggle-button-height-lg | Height of the large toggle button (default: var(--dds-spacing-1200)) |
--dds-toggle-button-height-md | Height of the medium toggle button (default: var(--dds-spacing-1000)) |
--dds-toggle-button-height-sm | Height of the small toggle button (default: var(--dds-spacing-800)) |
--dds-toggle-button-height-xs | Height of the extra small toggle button (default: var(--dds-spacing-600)) |
--dds-toggle-button-padding-lg | Padding of the large toggle button (default: var(--dds-spacing-300) var(--dds-spacing-400)) |
--dds-toggle-button-padding-md | Padding of the medium toggle button (default: var(--dds-spacing-300)) |
--dds-toggle-button-padding-sm | Padding of the small toggle button (default: var(--dds-spacing-200)) |
--dds-toggle-button-padding-xs | Padding of the extra small toggle button (default: var(--dds-spacing-150) var(--dds-spacing-200)) |
--dds-toggle-button-font-size-lg | Font size of the large toggle button (default: 1.125rem) |
--dds-toggle-button-font-size-md | Font size of the medium toggle button (default: 1rem) |
--dds-toggle-button-font-size-sm | Font size of the small toggle button (default: 0.875rem) |
--dds-toggle-button-font-size-xs | Font size of the extra small toggle button (default: var(--dds-font-xs)) |
--dds-toggle-button-border-enabled | Border color in enabled state (default: var(--dds-button-toggle-border-enabled)) |
--dds-toggle-button-background-enabled | Background color in enabled state (default: var(--dds-button-toggle-background-enabled)) |
--dds-toggle-button-content-enabled | Content/text color in enabled state (default: var(--dds-button-toggle-content-enabled)) |
--dds-toggle-button-border-hover | Border color in hover state (default: var(--dds-button-toggle-border-hover)) |
--dds-toggle-button-background-hover | Background color in hover state (default: var(--dds-button-toggle-background-hover)) |
--dds-toggle-button-border-pressed | Border color in pressed state (default: var(--dds-button-toggle-border-pressed)) |
--dds-toggle-button-background-pressed | Background color in pressed state (default: var(--dds-button-toggle-background-pressed)) |
--dds-toggle-button-background-selected-enabled | Background color in selected enabled state (default: var(--dds-button-toggle-background-selected-enabled)) |
--dds-toggle-button-content-selected-enabled | Content/text color in selected enabled state (default: var(--dds-button-toggle-content-selected-enabled)) |
--dds-toggle-button-background-selected-hover | Background color in selected hover state (default: var(--dds-button-toggle-background-selected-hover)) |
--dds-toggle-button-background-selected-pressed | Background color in selected pressed state (default: var(--dds-button-toggle-background-selected-pressed)) |
--dds-toggle-button-border-disabled | Border color in disabled state (default: var(--dds-button-toggle-border-disabled)) |
--dds-toggle-button-background-disabled | Background color in disabled state (default: var(--dds-button-toggle-background-disabled)) |
--dds-toggle-button-content-disabled | Content/text color in disabled state (default: var(--dds-button-toggle-content-disabled)) |
--dds-toggle-button-highcontrast-border | High contrast border color (default: var(--dds-button-toggle-highcontrast-border)) |
--dds-toggle-button-highcontrast-border-hover | High contrast border color on hover (default: var(--dds-button-toggle-highcontrast-border-hover)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-toggle-button
style="--dds-toggle-button-min-width-lg: value; --dds-toggle-button-min-width-md: value;">
Toggle button
</dap-ds-toggle-button>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-toggle-button {
--dds-toggle-button-min-width-lg: value;
--dds-toggle-button-min-width-md: value;
--dds-toggle-button-min-width-sm: value;
}
<dap-ds-toggle-button class="my-custom-dap-ds-toggle-button">
Toggle button
</dap-ds-toggle-button>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-toggle-button {
--dds-toggle-button-min-width-lg: value;
--dds-toggle-button-min-width-md: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
