Divider

There are two types of dividers, default, and button; meant for generic use and for separating buttons, respectively.

Component behavior

Inert. Purely a graphical element.

Examples

The dividers in the left column below are the default type, while those in the right column are of the button type.

Component

Code

  <div style="display:flex; padding: 4rem 4rem 1rem 4rem; align-items: center">
      <div style="display:flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%">
        <tpg-divider emphasis='x-high-emphasis'></tpg-divider>
        <tpg-divider emphasis='high-emphasis'></tpg-divider>
        <tpg-divider></tpg-divider>
        <tpg-divider emphasis='low-emphasis'></tpg-divider>
        <tpg-divider emphasis='x-low-emphasis'></tpg-divider>
      </div>

      <div style="display:flex; flex-direction: column; padding-left: 4rem; align-items: center; gap: 1rem; width: 100%;">
        <tpg-divider type='button' emphasis='x-high-emphasis'></tpg-divider>
        <tpg-divider type='button' emphasis='high-emphasis'></tpg-divider>
        <tpg-divider type='button'></tpg-divider>
        <tpg-divider type='button' emphasis='low-emphasis'></tpg-divider>
        <tpg-divider type='button' emphasis='x-low-emphasis'></tpg-divider>
      </div>
  </div>


  <div style="display:flex; align-items: end; justify-content: space-around; padding: 1rem 4rem 1rem 4rem;">
      <div style="display:flex; align-items: center; gap: 1rem; height: 100px">
        <tpg-divider orientation='vertical' emphasis='x-high-emphasis'></tpg-divider>
        <tpg-divider orientation='vertical' emphasis='high-emphasis'></tpg-divider>
        <tpg-divider orientation='vertical'></tpg-divider>
        <tpg-divider orientation='vertical' emphasis='low-emphasis'></tpg-divider>
        <tpg-divider orientation='vertical' emphasis='x-low-emphasis'></tpg-divider>
      </div>

      <div style="display:flex; padding-left: 4rem; align-items: center; gap: 1rem; height: 100px">
        <tpg-divider orientation='vertical' type='button' emphasis='x-high-emphasis'></tpg-divider>
        <tpg-divider orientation='vertical' type='button' emphasis='high-emphasis'></tpg-divider>
        <tpg-divider orientation='vertical' type='button'></tpg-divider>
        <tpg-divider orientation='vertical' type='button' emphasis='low-emphasis'></tpg-divider>
        <tpg-divider orientation='vertical' type='button' emphasis='x-low-emphasis'></tpg-divider>
      </div>
  </div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	Designates if the divider should be styled for dividing buttons or generic content.	'default' | 'button'	'default'
orientation	orientation	Designates the divider's orientation.	'horizontal' | 'vertical'	'horizontal'
emphasis	emphasis	Designates the dividers color emphasis.	| 'x-high-emphasis' | 'high-emphasis' | 'default-emphasis' | 'low-emphasis' | 'x-low-emphasis'	'default-emphasis'

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox