FAB

<tpg-fab></tpg-fab>

Floating Area Button (FAB) is to be used on top of other elements, such as a maps.

Component behavior

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

Vanilla JS

<tpg-fab label="Default" type="default" />
<tpg-fab label="Danger" type="danger" />

React

<tpg-fab label="Default" type="default" />
<tpg-fab label="Danger" type="danger" />

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

<script>
  const elements = document.querySelectorAll('.has-placeholder-icon');

  for (const element of elements){
    const item = element as FAB;
    item.iconTemplate = tpgIconPlaceholderCustom;
  }
</script>

<tpg-fab
  label="Icon leading"
  class="has-placeholder-icon"
></tpg-fab>
<tpg-fab
  label="Icon trailing"
  class="has-placeholder-icon"
  icon-position="trailing"
></tpg-fab>
<tpg-fab
  label="Icon top"
  class="has-placeholder-icon"
  icon-position="top"
></tpg-fab>
<tpg-fab
  class="has-placeholder-icon"
></tpg-fab>

React

<tpg-fab
  label="Icon leading"
  iconTemplate={tpgIconPlaceholderCustom}>
></tpg-fab>
<tpg-fab
  label="Icon trailing"
  iconTemplate={tpgIconPlaceholderCustom}>
  icon-position="trailing"
></tpg-fab>
<tpg-fab
  label="Icon top"
  iconTemplate={tpgIconPlaceholderCustom}>
  icon-position="top"
></tpg-fab>
<tpg-fab
  iconTemplate={tpgIconPlaceholderCustom}>
></tpg-fab>

Disabled

The FAB can be disabled using the disabled property.

Component

Vanilla JS

<tpg-fab label="Disabled" disabled=""></tpg-fab>

React

<tpg-fab label="Disabled" disabled></tpg-fab>

Badge

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

<script>
  const elements = document.querySelectorAll('.has-placeholder-icon');

  for (const element of elements){
    const item = element as Badge;
    item.leadingIconTemplate = tpgIconPlaceholderCustom;
  }
</script>

<tpg-fab>
  <tpg-badge
    slot="badge"
    label="Badge"
    size="xl"
  ></tpg-badge>
</tpg-fab>
<tpg-fab>
  <tpg-badge
    slot="badge"
    label="Badge"
    size="xl"
    class="has-placeholder-icon"
  ></tpg-badge>
</tpg-fab>

React

<tpg-fab>
  <tpg-badge
    slot="badge"
    label="Badge"
    size="xl"
  ></tpg-badge>
</tpg-fab>
<tpg-fab>
  <tpg-badge
    slot="badge"
    label="Badge"
    size="xl"
    leading-icon-template={tpgIconPlaceholderCustom}
  ></tpg-badge>
</tpg-fab>

Event handling

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

Component

Vanilla JS

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

<tpg-fab
  label="Alert Button 1"
  type="default"
  class="alert-button"
></tpg-fab>
<tpg-fab
  label="Alert Button 2"
  type="error"
  class="alert-button"
></tpg-fab>

React

<tpg-fab
  label="Alert Button 1"
  type="default"
  class="alert-button"
  ontpg-click={(e: TpgClickEvent) => {
    const button = e.target as FAB;
    alert("You've clicked: " + button.label);
  }}
></tpg-fab>
<tpg-fab
  label="Alert Button 1"
  type="default"
  class="alert-button"
  ontpg-click={(e: TpgClickEvent) => {
    const button = e.target as FAB;
    alert("You've clicked: " + button.label);
  }}
></tpg-fab>

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	The type of button to render in terms of severity-level.	'default' | 'error'	'default'
size	size	Size of the button, overrides base-class size	'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