Skip to content
Skip to content

Toggle c-button

Toggle buttons have an on/off or true/false state. A typical use case is for toggling a collapsible menu, and its default state reflects this.

Modules
Toggle
Macros
ToggleButton o-icon

Usage

<button class="c-toggle-button" data-module="Toggle">
  <div class="c-toggle-button__init">
    <span class="o-icon o-icon--navicon c-toggle-button-icon--init">
      <svg viewBox="0 0 1 1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://jaywing.github.io/atomic-framework/images/icons.svg#navicon"></use></svg>
    </span>
    <span class="c-toggle-button__text">Menu</span>
  </div>
  <div class="c-toggle-button__close">
    <span class="o-icon o-icon--close c-toggle-button-icon--close">
      <svg viewBox="0 0 1 1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://jaywing.github.io/atomic-framework/images/icons.svg#close"></use></svg>
    </span>
    <span class="c-toggle-button__text">Close</span>
  </div>
</button>

Macro

Macro
ToggleButton
Import
{% from 'macros/toggle-button.njk' import ToggleButton %}
Parameters
target (string or boolean:false) - reference to the element you want to toggle the active class on. If false, it toggles on itself
classes (string) - any extra classes to be put on the button element
content (object) - content of the button
content.offo-Icon (string: 'navicon') - ID of the icon you want to show on inactive state
content.ono-Icon (string: 'close') - ID of the icon you want to show on active state
content.offText (string: 'Menu') - c-text you want to show on inactive state
content.onText (string: 'Close') - c-text you want to show on active state
{{ ToggleButton() }}
<br /><br />

{% set content = {
  offIcon: 'minus',
  onIcon: 'plus',
  offText: 'Subtract',
  onText: 'Addition'
} %}
{{ ToggleButton(false, 'c-toggle-button--hideText', content) }}


Modifiers

c-toggle-button--hideText
Visually hides the text of the button, but it remains accessible to a screenreader (see above example)