Skip to content Skip to navigation Skip to topbar

Topbar

Version 1.2.0Github Storybook

Topbar contains application-wide controls that rest at the top of the screen.

Installation

yarn add @twilio-paste/topbar - or - yarn add @twilio-paste/core

Usage

import {Topbar} from '@twilio-paste/core/topbar';

const TopbarExample = () => {
  return (
    <Topbar id="topbar">
      <TopbarActions justify="start">{actions}</TopbarActions>
      <TopbarActions justify="end">{actions}</TopbarActions>
    </Topbar>
  );
};

Props

id RequiredRequired

Create a unique ID for the Topbar and provide it to the Sidebar component for accessible skip links

Type: string

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type: any
Default: TOPBAR

Inherited props

TopbarActions

display

Used to control the display of the actions, either flex or none.

Type: any

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type: any
Default: TOPBAR_ACTIONS

justify

Used to control where the actions are aligned visually, to the start or end or center of the container.

Type: Justify
Default: end

Inherited props