Tertiary button

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

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 click inside the entirety of its area while not disabled, or from “Enter” and “Space” keys while having k-focus.

Examples

Label

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

Component

Vanilla JS

      <tpg-tertiary-button
          label="Tertiary Button"
      ></tpg-tertiary-button>

React

      <tpg-tertiary-button
          label="Tertiary Button"
      ></tpg-tertiary-button>

Size

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

Component

Vanilla JS

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

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

React

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

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

Disabled

You can disable the Tertiary Button with the disabled attribute.

Component

Vanilla JS

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

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

React

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

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

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

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

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

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

React

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

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

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

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

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

Badge

The Tertiary Button 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 label="Badge 1">
          <tpg-badge
              slot="badge"
              label="Badge"
          ></tpg-badge>
      </tpg-tertiary-button>

      <tpg-tertiary-button label="Badge 2">
          <tpg-badge
              slot="badge"
              label="Badge"
              emphasis="high"
              type="danger"
          ></tpg-badge>
      </tpg-tertiary-button>

      <tpg-tertiary-button label="Badge 3">
          <tpg-badge
              slot="badge"
              label="Badge"
              emphasis="no-background-high"
              type="warning"
          ></tpg-badge>
      </tpg-tertiary-button>

React

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

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

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

Setting icons

You can use the icon-template attribute to set an icon for the Tertiary 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
  label="Icon leading"
  class="has-placeholder-icon">
</tpg-tertiary-button>

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

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

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

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

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

React

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

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

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

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

Event handling

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

Component

Vanilla JS

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

      <tpg-tertiary-button
          label="Alert Button 2"
          class="alert-button">
      </tpg-tertiary-button>
      <script>
          document.addEventListener('DOMContentLoaded', ()=>{
              const buttons = document.querySelectorAll('tpg-tertiary-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-tertiary-button
  label="Toggleable Check Button"
  ontpg-click={(e: TpgClickEvent) => {
      const tertiaryButton = e.target as TertiaryButton;
      alert("You've clicked: " + tertiaryButton.label);
  }}>
</tpg-tertiary-button>


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

<tpg-tertiary-button
  label="Toggleable Check Button"
  ontpg-click={(e: TpgClickEvent) => handleCheckInput(e)}>
</tpg-tertiary-button>

Tables

Properties

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