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.

<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>

<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>

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>

Import the component by its own subpath. This registers <dap-ds-toggle-button> (and the components it renders internally) and lets your bundler include only what you use:

import 'dap-design-system/components/toggle-button'

Need a reference to the class (e.g. to register it manually or extend it)? The same subpath default-exports it:

import DapDSToggleButton from 'dap-design-system/components/toggle-button'

Register the whole library at once — convenient, but pulls every component into your bundle:

import 'dap-design-system'

import { DapDSToggleButtonReact } from 'dap-design-system/react'

No custom events available.

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 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;
}