Primary button toggle

<tpg-primary-button-toggle></tpg-primary-button-toggle>

Primary buttons are high emphasis buttons used to communicate the primary and most important actions that users can take. They are typically placed throughout the UI, in places like Dialogues, Modal windows, Forms, Cards, Toolbars.

The PrimaryButtonToggle is a simpler iteration of the primary button, which has no alert states, but toggles rather than responds to clicks.

Component behavior

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

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

Code

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

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

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

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

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

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

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

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

React

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

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

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

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

Size

Use the size prop to set the size.

Component

Code

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

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

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

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

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

React

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

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

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

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

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

Badge

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

Code

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

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

Event handling

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

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

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

React

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


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

<tpg-primary-button-toggle
  label="Toggle Button 2"
  ontpg-input={(e: TpgInputEvent<boolean>) => handleButtonInput(e)}>
</tpg-primary-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