Primary button

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

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 PrimaryButton come with two alert state variants: PrimaryButtonDanger: used when the button enables an action that carries a real world danger (e.g. fire, deploy payload, etc..) PrimaryButtonError: used when the button enables a destructive action that affects the system, but does not constitute any real danger (e.g. delete permanently, deploy payload, etc..)

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

Button type

Use the type attribute to set the button’s type.

Component
Code

  <tpg-primary-button label="Default" type="default" />
  <tpg-primary-button label="Danger" type="danger" />
  <tpg-primary-button label="Error" type="error" />

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.

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

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

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

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

<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 QuaternaryButton; // api is same for all non-icon elements
          button.iconTemplate = tpgIconPlaceholderCustom;
      }
  });
</script>

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

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

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

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

Size

Use the size attribute to set the size.

Component
Code

  <tpg-primary-button label="Default size" size="regular" />
  <tpg-primary-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.

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

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

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

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

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

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

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

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

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

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

Badge

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

      <tpg-primary-button label="Badge 1">
          <tpg-badge
              slot="badge"
              label="Badge"
          ></tpg-badge>
      </tpg-primary-button>

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

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

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

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

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

Event handling

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

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

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

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

//Inline:
<tpg-primary-button
  label="Toggleable Check Button"
  ontpg-click={(e: TpgClickEvent) => {
      const primaryButton = e.target as PrimaryButton;
      alert("You've clicked: " + primaryButton.label);
  }}>
</tpg-primary-button>


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

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

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	The type of button to render in terms of severity-level.	'default' \| 'error' \| 'danger'	'default'
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.