Toggle Button Component
Minimal Layout
The default, minimal toggle button should be used when the contents are single-line and very short, as in shoe sizing, for example. This layout is geared more towards allowing the display of many more options and maximizing screen real estate.
NOTE: All toggle button examples utilize JavaScript to toggle the aria-pressed state of the button.
<button type="button" class="toggle-button" aria-pressed="false">
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
</span>
</button>
List Layout
List layout should be used when it's desired to have wider horizontal buttons. These are more easily stackable on narrower screens.
You may use this layout by adding the toggle-button--list-layout modifier to the toggle button.
List Toggle Button with Title
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
</span>
</button>
List Toggle Button with Title and Subtitle
A subtitle can be added via toggle-button__subtitle block.
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
List Toggle Button with Title and Multi-line Subtitle
To have a multi-line subtitle, you may use a single <p> tag that has longer text or a maximum of two separate <p> tags with shorter text inside the toggle-button__subtitle block.
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle">
<p>Subtitle 1</p>
<p>Subtitle 2</p>
</span>
</span>
</button>
List Toggle Button with Icon, Title, and Subtitle
To add an icon to a toggle button, you can use the toggle-button__icon block.
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="`#icon-truck-shipped-16`" />
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
List Toggle Button with Image, Title, and Subtitle
To add an image to a toggle button, you can use the toggle-button__image-container block using an <img> or as a css background image.
Using an Image Element
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img src="imgProfilePic" alt="" />
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Using a Contained CSS Background Image
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-landscape-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Using a Cover CSS Background Image
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Gallery Layout
Gallery layout should be used when there will be fewer buttons (as larger buttons take up more screen real estate) and it's desired to have a more vertical/square implementations with more emphasis on graphical elements (images/icons). As such, since the purpose of gallery layout buttons is to exentuate graphical elements, a graphical element (icon or image) is typically required in gallery layout buttons.
You may use this layout by adding the toggle-button--gallery-layout modifier to the toggle button.
Gallery Toggle Button with Image
To add an image to a toggle button, you can use the toggle-button__image-container block.
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img src="imgProfilePic" alt="" />
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Gallery Toggle Button Responsive Adjustments
Toggle buttons have a mininum and maximum width and are meant to be fluid between those boundaries. If using these buttons separately, you will need to set up their combined high-level layouts on your own. In these examples, their widths are artificially/manually set to various widths to demonstrate how the buttons undergo responsive adjustments.
The image used in these buttons will shrink/grow responsively in width and height based on the overall button width.
Resonsive Images Using Image Element
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 168px"
>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img src="imgProfilePic" alt="" />
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Minimum Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 260px"
>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img src="imgProfilePic" alt="" />
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> 260px Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 342px"
>
<span class="toggle-button__image-container">
<span class="toggle-button__image">
<img src="imgProfilePic" alt="" />
</span>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> 342px Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Responsive Images Using CSS Background-Image
These buttons use background-size: contain; for background image scaling/filling.
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 168px"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Minimum Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 260px"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> 260px Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 342px"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> 342px Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
These buttons use background-size: cover; for background image filling the alloted space. The following buttons have the background image positioning using background-position-y: 20%; . Depending on your specific image, you may also need to adjust the background positioning along the x and y axis to ensure the main focal point remains visible and centered in your implementation.
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-position-y: 20%;
background-size: cover;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Minimum Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 260px"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-position-y: 20%;
background-size: cover;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> 260px Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
style="width: 342px"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-position-y: 20%;
background-size: cover;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> 342px Sized Button </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Gallery Toggle Button with Icon
To add an icon to a toggle button, you can use the toggle-button__icon block.
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
>
<span class="toggle-button__icon">
<svg
aria-hidden="true"
class="icon icon--32-colored"
height="16"
width="16"
>
<icon-symbol name="mastercard-32-colored" prefix="icon" />
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
Disabled Toggle Button
Toggle buttons may be disabled with disabled or aria-disabled="true" .
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
disabled
>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="false"
aria-disabled="true"
>
<span class="toggle-button__icon">
<svg aria-hidden="true" class="icon icon--16" height="16" width="16">
<use href="`#on-the-way-16`" />
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="false"
disabled
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="true"
aria-disabled="true"
>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--gallery-layout"
aria-pressed="true"
disabled
>
<span class="toggle-button__icon">
<svg
aria-hidden="true"
class="icon icon--32-colored"
height="16"
width="16"
>
<use href="`#mastercard-32-colored`" />
</svg>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>
<button
type="button"
class="toggle-button toggle-button--list-layout"
aria-pressed="true"
aria-disabled="true"
>
<span class="toggle-button__image-container">
<span
class="toggle-button__image"
style="
background-image: url(/img/tb-profile-pic.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
"
/>
</span>
<span class="toggle-button__content">
<span class="toggle-button__title"> Title </span>
<span class="toggle-button__subtitle"> Subtitle </span>
</span>
</button>