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

PropertyTypeRequiredDefaultDescription
breadcrumbItemsobject[]NoAn array of links to be rendered as breadcrumbs
breadcrumbPrefixboolNoAdding prefix icon to the breadcrumb
titlenodeYesThe title of the page