FAB Toggle

<tpg-fab-toggle></tpg-fab-toggle>

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

Component behavior

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

Vanilla JS

<tpg-fab-toggle
  label="Default"
></tpg-fab-toggle>
<tpg-fab-toggle
  label="Selected"
  selected
></tpg-fab-toggle>
<tpg-fab-toggle
  label="Selected"
  type="error"
></tpg-fab-toggle>
<tpg-fab-toggle
  label="Selected"
  selected
  type="error"
></tpg-fab-toggle>

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

React

<tpg-fab-toggle
  @tpg-click={(prev) => setIsSelected(!prev)}
  selected={isSelected}
  label="Default"
></tpg-fab-toggle>
<tpg-fab-toggle
  @tpg-click={(prev) => setIsSelected(!prev)}
  selected={isSelected}
  label="Selected"
  selected></tpg-fab-toggle
>
<tpg-fab-toggle
  label="Selected"
  type="error"
></tpg-fab-toggle>
<tpg-fab-toggle
  label="Selected"
  selected
  type="error"
></tpg-fab-toggle>

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

<div style="display:flex; gap: 1rem;">
  <tpg-fab-toggle
    label="Icon leading"
    icon-template={tpgIconPlaceholderCustom}
  ></tpg-fab-toggle>
  <tpg-fab-toggle
    label="Icon trailing"
    icon-position="trailing"
    icon-template={tpgIconPlaceholderCustom}
  ></tpg-fab-toggle>
  <tpg-fab-toggle
    label="Icon top"
    icon-position="top"
    icon-template={tpgIconPlaceholderCustom}
  ></tpg-fab-toggle>
  <tpg-fab-toggle
    icon-template={tpgIconPlaceholderCustom}
  ></tpg-fab-toggle>
</div>

React

<div style="display:flex; gap: 1rem;">
  <tpg-fab-toggle
    label="Icon leading"
    iconTemplate={tpgIconPlaceholderCustom}
  ></tpg-fab-toggle>
  <tpg-fab-toggle
    label="Icon trailing"
    iconPosition="trailing"
    iconTemplate={tpgIconPlaceholderCustom}
  ></tpg-fab-togglelabel=>
  <tpg-fab-toggle
    label="Icon top"
    iconPosition="top"
    iconTemplate={tpgIconPlaceholderCustom}
  ></tpg-fab-toggle>
  <tpg-fab-toggle
    iconTemplate={tpgIconPlaceholderCustom}
  ></tpg-fab-toggleicon-template=>
</div>

Disabled

The FAB toggle can be disabled using the disabled property.

Component

Vanilla JS

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

React

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

Badge

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

<div style="display:flex; gap: 1rem;">
  <tpg-fab-toggle>
    <tpg-badge
      slot="badge"
      leading-icon-template={tpgIconPlaceholderCustom}
      size="xl"
      label="Badge"
    ></tpg-badge>
  </tpg-fab-toggle>
</div>

React

<div style="display:flex; gap: 1rem;">
  <tpg-fab-toggle>
    <tpg-badge
      slot="badge"
      leadingIconTemplate={tpgIconPlaceholderCustom}
      size="xl"
      label="Badge"
    ></tpg-badge>
  </tpg-fab-toggle>
</div>

Event handling

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

Component

Vanilla JS

<tpg-fab-toggle
  label="Toggle Button"
></tpg-fab-toggle>

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

React

<tpg-fab-toggle
  label="Toggle Button"
  ontpg-input={(e: TpgInputEvent<boolean>) =>
    ((e.target).selected = e.value)
  }>
</tpg-fab-toggle>

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'
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