Modal Header

<tpg-modal-header></tpg-modal-header>

The Modal Header is a title bar always located at the top of every modal of the Design System.

Its function is to provide:

• a description of the content of the modal
• navigation outside the modal
• options related to the layout of the modal
• manual scrolling of the modal

Examples

Basic

Component

Vanilla JS

    <tpg-modal-header>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
    </tpg-modal-header>

React

    <tpg-modal-header>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
    </tpg-modal-header>

With Menu

Component

Vanilla JS

    <tpg-modal-header>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
      <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
    </tpg-modal-header>

React

    <tpg-modal-header>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
      <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
    </tpg-modal-header>

Centered header with back button

Component

Vanilla JS

    <tpg-modal-header
      heading-placement="center"
    >
      <tpg-quaternary-button icon-template={tpgIconArrowBack} label="Text" slot="leading-btn"></tpg-quaternary-button>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
      <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
    </tpg-modal-header>

React

    <tpg-modal-header
      headingPlacement="center"
    >
      <tpg-quaternary-button icon-template={tpgIconArrowBack} label="Text" slot="leading-btn"></tpg-quaternary-button>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
      <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
    </tpg-modal-header>

Centered with manual scroll

Component

Vanilla JS

    <tpg-modal-header>
      <tpg-quaternary-button icon-template={tpgIconArrowBack} label="Text" slot="leading-btn"></tpg-quaternary-button>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
      <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
    </tpg-modal-header>

React

    <tpg-modal-header>
      <tpg-quaternary-button icon-template={tpgIconArrowBack} label="Text" slot="leading-btn"></tpg-quaternary-button>
      <tpg-badge
        slot="heading-badge"
        size="lg"
        label="Heading"
        emphasis="no-background"
        type="neutral"
      ></tpg-badge>
      <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
      <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
    </tpg-modal-header>

Tables

Properties

Attribute	Property	Description	Type	Default Value
heading-placement	headingPlacement	Placement for the heading badge.	HeadingPlacement	'left'
manual-scroll	manualScroll	Whether to enable manual scrolling buttons.	boolean	false
sticky-header-divider	stickyHeaderDivider	Wheter the divider should display sticky variant	boolean	true

Events

Event name	Reactjs attribute	Description

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
leading-btn	Slot reserved for leading tpg-quaternary-button
trailing-btn	Slot reserved for trailing tpg-quaternary-button
heading-badge	Slot reserved for tpg-badge to be used as a header
menu-item	Slot reserved for menu-item

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox