First Component

Let's add a Bookmark toggle. Press it once to turn it on, then again to turn it off.

If you haven't installed the packages yet, start with Installation.

This example uses a bundler that resolves package imports and compiles TypeScript, such as Vite. Keep index.html and bookmark-button.ts in the same folder.

Register the Component

Create bookmark-button.ts and import the toggle entry:

import "@ui-sdk/web/toggle"

Importing the toggle entry registers <ui-toggle>. The custom element manages the wrapped button's pressed state and sets aria-pressed for screen readers. The native button handles Enter and Space.

Use It on Your Page

Add this markup to index.html:

<ui-toggle id="bookmark">
  <button type="button">Bookmark</button>
</ui-toggle>

<script type="module" src="./bookmark-button.ts"></script>

Open your page. You should see a button labeled Bookmark. Next, add styles so you can tell when it is pressed.

Add Styles

When the toggle is pressed, its button has a data-pressed attribute. Style the button inside <ui-toggle>.

With Tailwind CSS configured in your app, add utility classes to the button. The data-pressed: variant applies while the toggle is pressed:

<ui-toggle id="bookmark">
  <button
    type="button"
    class="inline-flex h-8 items-center rounded-md border border-neutral-300 px-3 text-sm font-medium hover:bg-neutral-100 focus-visible:outline-2 focus-visible:outline-offset-2 data-pressed:bg-neutral-900 data-pressed:text-white"
  >
    Bookmark
  </button>
</ui-toggle>

<script type="module" src="./bookmark-button.ts"></script>

Keep the component import in bookmark-button.ts:

import "@ui-sdk/web/toggle"

Try the styled toggle:

Keep the label the same in both states. aria-pressed tells a screen reader whether the toggle is on.

Keep Going

• Toggle covers disabled states, controlled state, and groups of toggles.
• Components lists the other components you can add with the same install.
• Parts and Composition shows how to put a component with several parts together.
• State and Events shows how to read changes and control state from your app.
• Styling and Animation covers state attributes, CSS variables, and transitions.