Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Topbar

Version 1.2.0GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/topbar - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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

Props page anchor

Topbar

Topbar page anchor

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
string
Default
TOPBAR

TopbarActions

TopbarActions page anchor

display

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

Type
| "flex" | "none" | ("flex" | "none" | null)[] | { [x: string]: "flex" | "none" | undefined [x: number]: "flex" | "none" | undefined }

element

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

Type
string
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