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.

          
1
2
3
4
		    

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:

          
1
2
3
4
5
6
7
8
		    

# Styling

You can override the default styles with CSS like so:

        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

        /* 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: