Components
Title Section
The Title Section component is used for top-level page headings.
Import
import { TitleSection } from '@outfit/outkit';
Usage
With child elements
TitleSection also includes support for children elements, allowing for other react elements to be added. Child elements will populate to inside a Flex element to the right of the title.
Editable
Use the Editable title section if the title represents a re-namable object, such as a Workflow.
Best Practice
- Always use the Title Section at the very top of the page
- Only use Title Section for the top-level page title. For subheadings, use the Heading component instead.
- If the Title Section applies to a page that has tabs or sub-navigation, any actions included in the child elements should apply to all tabs or sub-pages.
Props
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
breadcrumbItems | object[] | No | An array of links to be rendered as breadcrumbs | |
breadcrumbPrefix | bool | No | Adding prefix icon to the breadcrumb | |
title | node | Yes | The title of the page |