Quaternary button toggle

<tpg-quaternary-button-toggle></tpg-quaternary-button-toggle>

Quaternary Button Toggle are low emphasis toggle buttons that can contain text, icons, or both. They can be used alone, in a row with 0px in between, or paired with other different Quaternary Buttons.

Quaternary Button Toggle provides a quick way to see whether a given option is enabled or disabled and to toggle between these states. They should be used if the main intent is to make a binary choice, such as turning something on or off.

The Small version is a low contrast, small sized Quaternary button used for low priority and low criticality actions in the system.

The Overlay version is a high contrast, small sized Quaternary button specifically designed to be used to interact with the Mini View. The Overlay version does not support the display of InfoBadgeSmall.

Examples

Examples

Selected state

Use the selected attribute to set the button’s selected state. The consumer of the button is responsible for setting this value when receiving a tpg-input event from the button.

Component

Vanilla JS

  <tpg-quaternary-button-toggle
    label="Default"
  ></tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
    label="Selected"
    selected
  ></tpg-quaternary-button-toggle>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const buttons = document.querySelectorAll('tpg-quaternary-button-toggle');
          for (const button of buttons) {
              button.addEventListener("tpg-input", (e) => {
                  e.target.selected = e.value
              });
          }
      });
  </script>

React

    <tpg-quaternary-button-toggle
      label="Default"
      ontpg-input={(e: TpgInputEvent<boolean>) =>
        ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

    <tpg-quaternary-button-toggle
      label="Selected"
      selected
      ontpg-input={(e: TpgInputEvent<boolean>) =>
        ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

Icon

Use the icon-template attribute (iconTemplate property) to set the icon. Combine with icon-position/iconPositon to set it before, after, or on top of the label.

Should an icon be present without any label, the button will automatically enter the icon-only state, enlarging the icon.

Component

Vanilla JS

  <tpg-quaternary-button-toggle
      label="With icon"
      class="has-placeholder-icon"
  ></tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
      label="With trailing icon"
      class="has-placeholder-icon"
      icon-position="trailing"
  ></tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
      label="With icon top"
      class="has-placeholder-icon"
      icon-position="top"
  ></tpg-quaternary-button-toggle>

  // Icon Only
  <tpg-quaternary-button-toggle
      class="has-placeholder-icon"
  ></tpg-quaternary-button-toggle>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const buttons = document.querySelectorAll('tpg-quaternary-button-toggle');
          for (const button of buttons) {
              button.addEventListener("tpg-input", (e) => {
                  e.target.selected = e.value
              });
          }

          // Adds placeholder icons onto primary buttons with relevant class applied
          const iconButtons = document.querySelectorAll('tpg-quaternary-button-toggle.has-placeholder-icon');
          for (const elem of iconButtons)  {
            const button = elem as QuaternaryButtonToggle; // api is same for all non-icon elements
            button.iconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

React

    import {tpgIconPlaceholderCustom} from '@tpg/grammar-web-icons';

    ...

    <tpg-quaternary-button-toggle
      iconTemplate={tpgIconPlaceholderCustom}
      label="With icon"
      ontpg-input={(e: TpgInputEvent<boolean>) =>
        ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

    <tpg-quaternary-button-toggle
      iconTemplate={tpgIconPlaceholderCustom}
      label="With trailing icon"
      iconPosition="trailing"
      ontpg-input={(e: TpgInputEvent<boolean>) =>
        ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

    <tpg-quaternary-button-toggle
      iconTemplate={tpgIconPlaceholderCustom}
      label="With icon top"
      iconPosition="top"
      ontpg-input={(e: TpgInputEvent<boolean>) =>
        ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

    // Icon Only
    <tpg-quaternary-button-toggle
      iconTemplate={tpgIconPlaceholderCustom}
      ontpg-input={(e: TpgInputEvent<boolean>) =>
        ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

Size

Use the size attribute to set the size.

Component

Vanilla JS

      <tpg-quaternary-button-toggle
          label="Default size"
          size="regular">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Small"
          size="small">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="X-small"
          size="x-small">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Overlay"
          size="Overlay">
      </tpg-quaternary-button-toggle>

React

      <tpg-quaternary-button-toggle
          label="Default size"
          size="regular">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Small"
          size="small">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="X-small"
          size="x-small">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Overlay"
          size="Overlay">
      </tpg-quaternary-button-toggle>

Disabled

You can disable the Quaternary Button with the disabled attribute.

Component

Vanilla JS

      <tpg-quaternary-button-toggle
          label="Disabled button"
          disabled>
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Enabled button">
      </tpg-quaternary-button-toggle>

React

      <tpg-quaternary-button-toggle
          label="Disabled button"
          disabled>
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Enabled button">
      </tpg-quaternary-button-toggle>

Custom width

Buttons will try to take all available space by default. Wrap a smaller container or use the style attribute combined with the width property to set custom width. Use width: fit-content to make the button adjust to the label.

Component

Vanilla JS

  <tpg-quaternary-button-toggle
      label="Default width (100%)"
  ></tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
      label="Fit content"
      style="display:flex; width: fit-content;"
  ></tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
      label="I am fitted as well, even though I'm longer!"
      style="display:flex; width: fit-content;"
  ></tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
      label="I have a fixed amount of px"
      style="display:flex; width: 275px;"
  ></tpg-quaternary-button-toggle>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const buttons = document.querySelectorAll('tpg-quaternary-button-toggle');
          for (const button of buttons) {
              button.addEventListener("tpg-input", (e) => {
                  e.target.selected = e.value
              });
          }
      });
  </script>

React

    <tpg-quaternary-button-toggle
      label="Default width (100%)">
      ontpg-input={(e: TpgInputEvent<boolean>) =>
          ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    </tpg-quaternary-button-toggle>

    <tpg-quaternary-button-toggle
      label="Fit content"
      style={{ display: "flex", width: "fit-content" }}
      ontpg-input={(e: TpgInputEvent<boolean>) =>
          ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

    <tpg-quaternary-button-toggle
      label="I am fitted as well, even though I'm longer!"
      style={{ display: "flex", width: "fit-content" }}
      ontpg-input={(e: TpgInputEvent<boolean>) =>
          ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

    <tpg-quaternary-button-toggle
      label="I have a fixed amount of px"
      style={{ display: "flex", width: "275px" }}
      ontpg-input={(e: TpgInputEvent<boolean>) =>
          ((e.target as QuaternaryButtonToggle).selected = e.value!)
      }
    ></tpg-quaternary-button-toggle>

Activated indicator

Add a activated-indicator to the button with the activated attribute.

Component

Code

  <tpg-quaternary-button-toggle
      label="Button w/ activated indicator"
      activated
  ></tpg-quaternary-button-toggle>

React

  <tpg-quaternary-button-toggle
      label="Button w/ activated indicator"
      activated
  ></tpg-quaternary-button-toggle>

Badge

The Quaternary Button Toggle includes two dedicated badge slots, a regular badge and a smaller info badge placed in the top right corner. To display either of these badges, create a Badge element in either slot="badge" or slot="counter-badge"

Component

Vanilla JS

  <tpg-quaternary-button-toggle
      label="Badge"
      style="display:flex; width: fit-content;"
  >
      <tpg-badge
          slot="badge"
          label="Badge"
      ></tpg-badge>
  </tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
      label="Counter Badge"
      style="display:flex; width: fit-content;"
  >
      <tpg-badge
          size="xxs"
          slot="counter-badge"
          label="Counter badge"
          emphasis="high"
          type="danger"
      ></tpg-badge>
  </tpg-quaternary-button-toggle>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          const buttons = document.querySelectorAll('tpg-quaternary-button-toggle');
          for (const button of buttons) {
              button.addEventListener("tpg-input", (e) => {
                  e.target.selected = e.value
              });
          }
      });
  </script>

React

  <tpg-quaternary-button-toggle
    label="Badge"
    style={{
      display: "flex",
      width: "fit-content"
    }}
    ontpg-input={(e: TpgInputEvent<boolean>) =>
      ((e.target as QuaternaryButtonToggle).selected = e.value!)
    }>
    <tpg-badge slot="badge" label="Badge"></tpg-badge>
  </tpg-quaternary-button-toggle>

  <tpg-quaternary-button-toggle
    label="Counter Badge"
    style={{
      display: "flex",
      width: "fit-content"
    }}
    ontpg-input={(e: TpgInputEvent<boolean>) =>
      ((e.target as QuaternaryButtonToggle).selected = e.value!)
    }>
      <tpg-badge
          size="xxs"
          slot="counter-badge"
          label="Counter badge"
          emphasis="high"
          type="danger"
      ></tpg-badge>
  </tpg-quaternary-button-toggle>

Event handling

The QuaternaryButtonToggle emits both a TpgInputEvent and TpgClickEvent when clicked. Below are some examples of how you can handle the TpgInputEvent event. See Primary Button documentation for how to handle the TpgClickEvent.

Component

Vanilla JS

      <tpg-quaternary-button-toggle
          label="Toggle Button 1"
          class="toggle-button">
      </tpg-quaternary-button-toggle>

      <tpg-quaternary-button-toggle
          label="Toggle Button 2"
          class="toggle-button">
      </tpg-quaternary-button-toggle>

      <script>
          document.addEventListener('DOMContentLoaded', ()=>{
              const buttons = document.querySelectorAll('tpg-quaternary-button-toggle.toggle-button');
              for (const button of buttons) {
                  button.addEventListener("tpg-input", (e) => {
                      e.target.selected = e.value
                  });
              }
          });
      </script>

React

//Inline:
<tpg-quaternary-button-toggle
  label="Toggle Button 1"
  ontpg-input={(e: TpgInputEvent<boolean>) =>
      ((e.target as QuaternaryButtonToggle).selected = e.value!)
  }>
</tpg-quaternary-button-toggle>


//Function call:
function handleButtonInput(e: TpgInputEvent<boolean>) {
  const quaternaryButton = e.target as QuaternaryButtonToggle;
  quaternaryButton.selected = e.value!;
}

<tpg-quaternary-button-toggle
  label="Toggle Button 2"
  ontpg-input={(e: TpgInputEvent<boolean>) => handleButtonInput(e)}>
</tpg-quaternary-button-toggle>

Tables

Properties

Attribute	Property	Description	Type	Default Value
activated	activated	The activates state is used to display an activated_indicator at the bottom of the button.	boolean	false
selected	selected	Defines if the button should be rendered as toggled or not. The consumer is responsible for setting this according to emitted events.	boolean	false
label	label	Textual label of the button	string	''
aria-label	ariaLabel	The aria-label of the button. This is used for accessibility purposes. Defaults to label if defined	string
disabled	disabled	Flag that disables the button, just like vanilla	boolean	false
icon-template	iconTemplate	URI-encoded SVG template for the button's icon. Supported constants are found in	IconConstant | ''	''
icon-position	iconPosition	The positioning of the icon	'leading' | 'trailing' | 'top'	'leading'
icon-only-size	iconOnlySize	The size of the icon when the button has no label	IconSize	'large'
size	size	Size of the button	'x-small' | 'small' | 'regular' | 'overlay'	'regular'

Events

Event name	Reactjs attribute	Description
tpg-input	ontpg-input	Event emitted when the button is triggered by click or press. The value of the event is the inverse of the current toggled state
tpg-click	ontpg-click	Event emitted when the button is triggered, either by clicking it or pressing space/enter while focused.

Functions

Name	Description	Arguments
focus	This method can be called to shift focus to the button.	No parameters

Slots

Name	Description
overlay-content	Slot reserved for content that should be displayed as an overlay over default button apperance.
counter-badge	Slot for inserting a counter badge into the top-right corner of the button
badge	Slot dedicated to slotting a badge. NOTE: should NOT be used in conjunction with label and icon!

CSS Parts

Attribute	Description
counter-badge	Part for styling the counter-badge container

Sandbox