Toggle button

Toggle button is a custom element that allows users to toggle between two states.

Examples Default tooltip

To make the button acitve use the active attribute. With a native button you can use the aria-pressed attribute also.

<dap-ds-stack direction="row">
  <dap-ds-toggle-button>
    Toggle me
  </dap-ds-toggle-button>
  <dap-ds-toggle-button active>
    Toggle me
  </dap-ds-toggle-button>

  <button
    class="dds-toggle-button dds-toggle-button--md dds-toggle-button--active"
    aria-pressed="true">
    Native toggle
  </button>

</dap-ds-stack>
Size 
<dap-ds-stack direction="row">
  <dap-ds-toggle-button size="xs">
    Toggle me
  </dap-ds-toggle-button>
  <dap-ds-toggle-button size="sm">
    Toggle me
  </dap-ds-toggle-button>
  <dap-ds-toggle-button>
    Toggle me
  </dap-ds-toggle-button>
  <dap-ds-toggle-button size="lg">
    Toggle me
  </dap-ds-toggle-button>
</dap-ds-stack>
Shape

You can change the shape of the toggle button by using the shape attribute.

<dap-ds-stack direction="row">
  <dap-ds-toggle-button shape="button">
    Toggle me
  </dap-ds-toggle-button>
  <dap-ds-toggle-button shape="circle" active>
    <dap-ds-icon name="menu-line"></dap-ds-icon>
  </dap-ds-toggle-button>

  <button
    class="dds-toggle-button dds-toggle-button--md dds-toggle-button--circle dds-toggle-button--active"
    aria-pressed="true">
    <dap-ds-icon name="menu-line"></dap-ds-icon>
  </button>
</dap-ds-stack>
Importing 
import { DapDSToggleButton } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSToggleButtonReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
size'lg', 'md' , 'sm' , 'xs''md'The size of the button
activebooleanfalseWhether the button is active.
shape'button', 'circle''button'The shape of the button
sizeChildrenstring'true'
Slots
NameDescription
(default)The content of the toggle button.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main button container.
high-contrastThe high contrast part of the button.
CSS Custom Properties
Property NameDescription
--dds-toggle-button-min-width-lgMinimum width of the large toggle button
--dds-toggle-button-min-width-mdMinimum width of the medium toggle button
--dds-toggle-button-min-width-smMinimum width of the small toggle button
--dds-toggle-button-min-width-xsMinimum width of the extra small toggle button
--dds-toggle-button-height-lgHeight of the large toggle button
--dds-toggle-button-height-mdHeight of the medium toggle button
--dds-toggle-button-height-smHeight of the small toggle button
--dds-toggle-button-height-xsHeight of the extra small toggle button
--dds-toggle-button-padding-lgPadding of the large toggle button
--dds-toggle-button-padding-mdPadding of the medium toggle button
--dds-toggle-button-padding-smPadding of the small toggle button
--dds-toggle-button-padding-xsPadding of the extra small toggle button
--dds-toggle-button-font-size-lgFont size of the large toggle button
--dds-toggle-button-font-size-mdFont size of the medium toggle button
--dds-toggle-button-font-size-smFont size of the small toggle button
--dds-toggle-button-font-size-xsFont size of the extra small toggle button
--dds-toggle-button-border-enabledBorder color in enabled state
--dds-toggle-button-background-enabledBackground color in enabled state
--dds-toggle-button-content-enabledContent/text color in enabled state
--dds-toggle-button-border-hoverBorder color in hover state
--dds-toggle-button-background-hoverBackground color in hover state
--dds-toggle-button-border-pressedBorder color in pressed state
--dds-toggle-button-background-pressedBackground color in pressed state
--dds-toggle-button-background-selected-enabledBackground color in selected enabled state
--dds-toggle-button-content-selected-enabledContent/text color in selected enabled state
--dds-toggle-button-background-selected-hoverBackground color in selected hover state
--dds-toggle-button-background-selected-pressedBackground color in selected pressed state
--dds-toggle-button-border-disabledBorder color in disabled state
--dds-toggle-button-background-disabledBackground color in disabled state
--dds-toggle-button-content-disabledContent/text color in disabled state
--dds-toggle-button-highcontrast-borderHigh contrast border color
--dds-toggle-button-highcontrast-border-hoverHigh contrast border color on hover