Toggle Basic

The toggle button is styled and ready to use out of the box: use pressed and disabled to configure the initial state. The host element itself is the button — provide its content through the default slot, and restyle it directly with the --sv-* variables and the :state(--pressed) CSS state, no CSS parts needed.

Code

The following example assumes that you have imported the component and set up the theme.

<div class="toggle-row">
  <sv-toggle>Default</sv-toggle>
  <sv-toggle pressed>Pressed</sv-toggle>
  <sv-toggle disabled>Disabled</sv-toggle>
  <sv-toggle disabled pressed>Pressed Disabled</sv-toggle>
</div>

<style>
  .toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
</style>