Doggo Storybook 0.10.2

Toggle Button

Renders a button that toggles a state.

Read more Read less

Use this component to switch a feature or setting on or off, for example to toggle dark mode or mute/unmute sound.

See also button/1, button_link/1, and disclosure_button/1.

Usage

With a Phoenix.LiveView.JS command:

<.toggle_button on_click={JS.push("toggle-mute")} pressed={@muted}>
  Mute
</.toggle_button>

Accessibility

The button state is conveyed via the aria-pressed attribute and the button styling. The button text should not change depending on the state. You may however include an icon that changes depending on the state.

CSS

A toggle button can be identified with an attribute selector for the aria-pressed attribute.

// any toggle button regardless of state
button[aria-pressed] {}

// unpressed toggle buttons
button[aria-pressed="false"] {}

// pressed toggle buttons
button[aria-pressed="true"] {}
Default Open in playground
off
<div>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-default")
  |> JS.toggle(to: "#indicator-off-default")
  }
  >
    click me
  </.toggle_button>
  <div id="indicator-on-default" hidden>on</div>
  <div id="indicator-off-default">off</div>
</div>
Disabled Open in playground 
<.toggle_button disabled on_click={%JS{ops: []}}>
  click me
</.toggle_button>
Variant Open in playground
off
<div>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  }
    variant="primary"
  >
    primary
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  }
    variant="secondary"
  >
    secondary
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  }
    variant="info"
  >
    info
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  }
    variant="success"
  >
    success
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  }
    variant="warning"
  >
    warning
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-variant")
  |> JS.toggle(to: "#indicator-off-variant")
  }
    variant="danger"
  >
    danger
  </.toggle_button>
  <div id="indicator-on-variant" hidden>on</div>
  <div id="indicator-off-variant">off</div>
</div>
Size Open in playground
off
<div>
  <.toggle_button
    size="small"
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }
  >
    small
  </.toggle_button>
  <.toggle_button
    size="normal"
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }
  >
    normal
  </.toggle_button>
  <.toggle_button
    size="medium"
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }
  >
    medium
  </.toggle_button>
  <.toggle_button
    size="large"
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-size")
  |> JS.toggle(to: "#indicator-off-size")
  }
  >
    large
  </.toggle_button>
  <div id="indicator-on-size" hidden>on</div>
  <div id="indicator-off-size">off</div>
</div>
Fill Open in playground
off
<div>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-fill")
  |> JS.toggle(to: "#indicator-off-fill")
  }
    fill="solid"
  >
    solid
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-fill")
  |> JS.toggle(to: "#indicator-off-fill")
  }
    fill="outline"
  >
    outline
  </.toggle_button>
  <.toggle_button
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-fill")
  |> JS.toggle(to: "#indicator-off-fill")
  }
    fill="text"
  >
    text
  </.toggle_button>
  <div id="indicator-on-fill" hidden>on</div>
  <div id="indicator-off-fill">off</div>
</div>
Shape Open in playground
off
<div>
  <.toggle_button
    shape={nil}
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-shape")
  |> JS.toggle(to: "#indicator-off-shape")
  }
  >
    nil
  </.toggle_button>
  <.toggle_button
    shape="circle"
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-shape")
  |> JS.toggle(to: "#indicator-off-shape")
  }
  >
    circle
  </.toggle_button>
  <.toggle_button
    shape="pill"
    on_click={%JS{}
  |> JS.toggle(to: "#indicator-on-shape")
  |> JS.toggle(to: "#indicator-off-shape")
  }
  >
    pill
  </.toggle_button>
  <div id="indicator-on-shape" hidden>on</div>
  <div id="indicator-off-shape">off</div>
</div>