Secondary button

<tpg-secondary-button></tpg-secondary-button>

Secondary Buttons are medium emphasis buttons used to communicate a secondary action the users can take. They are typically placed throughout the UI, in places like Dialog, Modal windows, Forms, Cards, Toolbars.

Examples

Label and icon

Use the label attribute to set the label of the button. 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.

Component

Vanilla JS

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

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

React

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

  ...

  <tpg-secondary-button
      label="With icon"
      iconTemplate={tpgIconPlaceholderCustom}
  ></tpg-secondary-button>
  <tpg-secondary-button
      label="With trailing icon"
      iconTemplate={tpgIconPlaceholderCustom}
      iconPosition="trailing"
  ></tpg-secondary-button>
  <tpg-secondary-button
      label="With icon top"
      iconTemplate={tpgIconPlaceholderCustom}
      iconPosition="top"
  ></tpg-secondary-button>

Size

Use the size attribute to set the size.

Component

Code

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

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

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

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

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

React

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

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

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

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

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

Badge

The Secondary 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-secondary-button
      id="secondary-badge-1"
      label="Badge 1"
      style="display:flex; width: fit-content;"
  >
      <tpg-badge
          slot="badge"
          label="Badge"
      ></tpg-badge>
  </tpg-secondary-button>

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

React

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

    <tpg-secondary-button
      label="Badge 2"
      style={{ display: "flex", width: "fit-content" }}
    >
      <tpg-badge
        slot="badge"
        label="Badge"
        emphasis="high"
        type="danger"
      ></tpg-badge>
    </tpg-secondary-button>
    <tpg-secondary-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-secondary-button>

Event handling

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

Component

Vanilla JS

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

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


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

<tpg-secondary-button
  label="Toggleable Check Button"
  ontpg-click={(e: TpgClickEvent) => handleCheckInput(e)}>
</tpg-secondary-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