Keyboard button

<tpg-keyboard-button></tpg-keyboard-button>

Keyboard Buttons are used in the on-screen keyboard component and are divided in four categories:

• Primary Keyboard Button: high emphasis, push buttons used for the actual keys of the keyboard component (letters and numbers)
• Primary Keyboard Button Toggle: high emphasis, toggle buttons used for the special function keys of the keyboard component
• Secondary Keyboard Button: low emphasis, push buttons used for the function keys of the keyboard component
• Secondary Keyboard Button Toggle: low emphasis, toggle buttons used for the function keys of the keyboard component

Examples

Button type

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

Component

Code

  <tpg-keyboard-button label="Primary" type="primary" />
  <tpg-keyboard-button label="Secondary" type="secondary" />

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.

The label won’t be rendered if an icon is set, but is still useful as it is what’s emitted when the keyboard button is pressed

Component

Code

  <tpg-keyboard-button class="has-placeholder-icon" label="kb1" />
  <tpg-keyboard-button label="X"/>
  <tpg-keyboard-button class="has-placeholder-icon" label="kb2" type="secondary" />
  <tpg-keyboard-button label="Z" type="secondary" />

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

React

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

  ...

  <tpg-keyboard-button iconTemplate={tpgIconPlaceholderCustom} />
  <tpg-keyboard-button label="X"/>
  <tpg-keyboard-button type="secondary" iconTemplate={tpgIconPlaceholderCustom} />
  <tpg-keyboard-button type="secondary" label="Z"/>

Fill

The keyboard button will by default hug its content. By setting the fill attribute the button will take as much space horizontally as given by its parent container.

Component

Code

  <tpg-keyboard-button fill icon-template={tpgIconPlaceholderCustom} />
  <tpg-keyboard-button fill label="X"/>

  <div  style="display: flex; gap: 8px">
      <tpg-keyboard-button fill label="X"/>
      <tpg-keyboard-button fill icon-template={tpgIconPlaceholderCustom} />
      <tpg-keyboard-button fill label="X"/>
  </div>

Disabled

The keyboard button can be disabled by setting the disabled attribute

Component

Code

  <tpg-keyboard-button disabled label="X" />

Events

The keyboard button emits a TpgClickEvent when clicked.

Component

Code

  <tpg-keyboard-button class="xyz-keyboard" label="X" />
  <tpg-keyboard-button class="xyz-keyboard" label="Y" />
  <tpg-keyboard-button class="xyz-keyboard" label="Z" />
  <tpg-keyboard-button class="xyz-keyboard" label="SuperSecretKey" icon-template={tpgIconPlaceholderCustom} />

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

React

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

  ...

  <tpg-keyboard-button
      label="X"
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButton;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

  <tpg-keyboard-button
      label="Y"
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButton;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

  <tpg-keyboard-button
      label="Z"
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButton;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

  <tpg-keyboard-button
      label="SuperSecretKey"
      iconTemplate={tpgIconPlaceholderCustom}
      ontpg-click={(e: TpgClickEvent) => {
          const keyboardBtn = e.target as KeyboardButton;
          alert("You've clicked: " + keyboardBtn.label);
      }}>
  />

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	The type of button to render.	'primary' | 'secondary'	'primary'
label	label	Textual label of the keyboard button	string	''
icon-template	iconTemplate	URI-encoded SVG template for the button's icon. Supported constants are found in	IconConstant | ''	''
disabled	disabled	Flag that disables the button, just like vanilla	boolean	false
fill	fill	Flag that causes the keyboard button to fill its parent container horizontally	boolean	false

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
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox