Quaternary button

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

Quaternary Button Push 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.

The Overlay version is a Quaternary button specifically designed to be used to interact with the Mini View. They can be used alone, in a row with 0px in between, or paired with other different Quaternary Buttons. The Overlay version does not support the display of InfoBadgeSmall.

Examples

Label

Use the label attribute to set the label of the button.

Component

Vanilla JS

      <tpg-quaternary-button
          label="Quaternary Button"
      ></tpg-quaternary-button>

React

      <tpg-quaternary-button
          label="Quaternary Button"
      ></tpg-quaternary-button>

Size

You can control the Quaternary Button’s size using the size attribute

Component

Vanilla JS

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

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

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

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

React

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

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

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

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

Disabled

You can disable the Quaternary Button with the disabled attribute.

Component

Vanilla JS

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

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

React

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

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

Activated indicator

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

Component

Code

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

React

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

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-quaternary-button
      label="Default width (100%)">
  </tpg-quaternary-button>

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

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

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

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

React

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

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

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

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

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

Badge

The Quaternary Button 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
      label="Badge"
      style="display:flex; width: fit-content;">
      <tpg-badge
          slot="badge"
          label="Badge"
      ></tpg-badge>
  </tpg-quaternary-button>

  <tpg-quaternary-button
      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>

React

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

  <tpg-quaternary-button
    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>

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-quaternary-button
  label="Icon leading"
  class="has-placeholder-icon">
</tpg-quaternary-button>

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

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

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

<script>
  document.addEventListener('DOMContentLoaded', ()=>{
      // Adds placeholder icons onto quaternary buttons with relevant class applied
      const buttons = document.querySelectorAll('tpg-quaternary-button.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-quaternary-button
  label="Icon leading"
  iconTemplate={tpgIconPlaceholderCustom}>
</tpg-quaternary-button>

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

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

<tpg-quaternary-button
  iconTemplate={tpgIconPlaceholderCustom}>
</tpg-quaternary-button>

Event handling

The QuaternaryButton emits a TpgClickEvent when clicked. Below are some examples of how you can handle the event.

Component

Vanilla JS

      <tpg-quaternary-button
          label="Alert Button 1"
          class="alert-button">
      </tpg-quaternary-button>

      <tpg-quaternary-button
          label="Alert Button 2"
          class="alert-button">
      </tpg-quaternary-button>

      <script>
          document.addEventListener('DOMContentLoaded', ()=>{
              const buttons = document.querySelectorAll('tpg-quaternary-button.alert-button');
              for (const button of buttons) {
                  button.addEventListener("tpg-click", (e) => {
                      const button = e.target;
                      alert("You've clicked: " + button.label)
                  });
              }
          });
      </script>

React

//Inline:
<tpg-quaternary-button
  label="Alert Button 1"
  ontpg-click={(e: TpgClickEvent) => {
      const quaternaryButton = e.target as QuaternaryButton;
      alert("You've clicked: " + quaternaryButton.label);
  }}>
</tpg-quaternary-button>


//Function call:
function handleButtonInput(e: TpgClickEvent) {
  const quaternaryButton = e.target as QuaternaryButton;
  alert("You've clicked: " + quaternaryButton.label);
}

<tpg-quaternary-button
  label="Alert Button 2"
  ontpg-click={(e: TpgClickEvent) => handleButtonInput(e)}>
</tpg-quaternary-button>

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
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-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