Tertiary button toggle

<tpg-tertiary-button-toggle></tpg-tertiary-button-toggle>

Tertiary Button are medium-low emphasis buttons used to communicate a tertiary action the users can take. They are typically placed in Forms where users can take non-tertiary workflow related actions.

Component behavior

The tertiary button will respond to clicks inside the entirety of its area while not disabled, or from “Enter” and “Space” keys while having k-focus.

Examples

Selected state

Use the selected prop 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-tertiary-button-toggle
    label="Default"
  ></tpg-tertiary-button-toggle>
  <tpg-tertiary-button-toggle
    label="Selected"
    selected
  ></tpg-tertiary-button-toggle>

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

React

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

Setting icons

You can use the icon-template attribute to set an icon for the button.

This can also be combined with the icon-position attribute to set its position

The icon size is managed by the component itself. When there is an icon and no label, the icon size will increase.

Component

Vanilla JS

<tpg-tertiary-button-toggle
  label="Icon leading"
  class="has-placeholder-icon">
</tpg-tertiary-button-toggle>

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

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

<tpg-tertiary-button-toggle
  class="has-placeholder-icon">
</tpg-tertiary-button-toggle>

<script>
  document.addEventListener('DOMContentLoaded', ()=>{
      // Adds placeholder icons onto quaternary buttons with relevant class applied
      const buttons = document.querySelectorAll('tpg-tertiary-button-toggle.has-placeholder-icon');

      for (const elem of buttons) {
          const button = elem as QuaternaryButton; // api is same for all non-icon elements
          button.iconTemplate = tpgIconPlaceholderCustom;
      }
  });
</script>

React

<tpg-tertiary-button-toggle
  label="Icon leading"
  iconTemplate={tpgIconPlaceholderCustom}>
</tpg-tertiary-button-toggle>

<tpg-tertiary-button-toggle
  label="Icon trailing"
  iconPosition="trailing"
  iconTemplate={tpgIconPlaceholderCustom}>
</tpg-tertiary-button-toggle>

<tpg-tertiary-button-toggle
  label="Icon top"
  iconPosition="top"
  iconTemplate={tpgIconPlaceholderCustom}>
</tpg-tertiary-button-toggle>

<tpg-tertiary-button-toggle
  iconTemplate={tpgIconPlaceholderCustom}>
</tpg-tertiary-button-toggle>

Size

Use the size prop to set the size.

Component

Code

  <tpg-tertiary-button-toggle label="Default size" size="regular" />
  <tpg-tertiary-button-toggle label="Small" size="small" />

Custom width

Buttons will try to take all available space by default unless they have an icon and no text — icon-only. 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.

The label will also be automatically truncated should the text exceed its container’s width.

Component

Vanilla JS

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

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

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

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

  <tpg-tertiary-button-toggle
      label="I am overflowing, too much text"
      style="width: 220px; display: flex;">
  </tpg-tertiary-button-toggle>

React

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

        <tpg-tertiary-button-toggle
          label="Fit content"
          style={{ width: 'fit-content', display: 'flex' }}
        ></tpg-tertiary-button-toggle>

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

        <tpg-tertiary-button-toggle
          label="I have a fixed amount of px"
          style={{ width: '275px', display: 'flex' }}
        ></tpg-tertiary-button-toggle>

        <tpg-tertiary-button-toggle
          label="I am overflowing, too much text"
          style={{ width: '220px', display: 'flex' }}
        ></tpg-tertiary-button-toggle>

Badge

The Tertiary Button Toggle includes a dedicated badge slot. To display a badge within the button, place a Badge component in this slot using slot="badge".

Component

Vanilla JS

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

  <tpg-tertiary-button-toggle
      label="Badge 2"
      style="display:flex; width: fit-content;"
  >
      <tpg-badge
          slot="badge"
          label="Badge"
          emphasis="high"
          type="danger"
      ></tpg-badge>
  </tpg-tertiary-button-toggle>
  <tpg-tertiary-button-toggle
      label="Badge 3"
      style="display:flex; width: fit-content;"
  >
      <tpg-badge
          slot="badge"
          label="Badge"
          emphasis="no-background-high"
          type="warning"
      ></tpg-badge>
  </tpg-tertiary-button-toggle>

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

React

  <tpg-tertiary-button-toggle
    label="Badge 1"
    style={{ display: "flex", width: "fit-content" }}
  >
    <tpg-badge slot="badge" label="Badge"></tpg-badge>
  </tpg-tertiary-button-toggle>

  <tpg-tertiary-button-toggle
    label="Badge 2"
    style={{ display: "flex", width: "fit-content" }}
  >
    <tpg-badge
      slot="badge"
      label="Badge"
      emphasis="high"
      type="danger"
    ></tpg-badge>
  </tpg-tertiary-button-toggle>
  <tpg-tertiary-button-toggle
    label="Badge 3"
    style={{ display: "flex", width: "fit-content" }}
  >
    <tpg-badge
      slot="badge"
      label="Badge"
      emphasis="no-background-high"
      type="warning"
    ></tpg-badge>
  </tpg-tertiary-button-toggle>

Event handling

The TertiaryButtonToggle 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-tertiary-button-toggle
          label="Toggle Button 1"
          class="toggle-button">
      </tpg-tertiary-button-toggle>

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

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

React

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


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

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

Tables

Properties

Attribute	Property	Description	Type	Default Value
size	size	Size of the button, overrides base-class size	'small' | 'regular'	'regular'
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'

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
badge	Slot dedicated to slotting a badge. NOTE: should NOT be used in conjunction with label and icon!

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox