1. Buttons
  2. Toggle Button

Buttons

Toggle Button

This component is a generic button for displaying on and off states.

Usage

The <media-toggle-button> component is a generic toggle that can be used to display on (pressed) and off (not-pressed) states.

          
        

By default, the toggle will start in the off (not-pressed) state. You can start in the on state (pressed) like so:

          
        

Tooltips

Tooltips can be provided like so:

          
        

Styling

You can override the default styles with CSS like so:

css
        media-toggle-button {
  transition: opacity 0.2s ease-in;
}

/* Apply styles when pressed. */
media-toggle-button[data-pressed] {
}

/* Apply styles when _not_ pressed. */
media-toggle-button:not([data-pressed]) {
}

      

Focus

css
        /* Apply styles when focused via keyboard. */
media-toggle-button[data-focus] {
  outline: 3px solid blue;
}

      

Tailwind

The following is a headless example using Tailwind:

          
        

Tooltips

The following extends the example above with tooltips: