Title Bar Overview The title bar provides context and actions related to a particular section of content that follows below on the screen.
Props Title bar has a number of props to facilitate a variety of uses:
children string
The content of the title is passed as the child of the component.
headingAs 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' = h3
The heading tag used for the title. It should be one of the following strings: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'.
actionItem React.ComponentType
An action item, most commonly a button or a link, related to the title. The actionItem is
hidden for extra small viewports (less than 480px).
hideActionItemOn MQPartial<boolean> = {xs: true}
An object to specify in which breakpoints to hide the action item.
overrides object
If provided, overrides the respective presets for the component and provided elements.
stylePreset MQ<string>
If provided, this overrides the style preset applied to the TitleBar.
spaceInset MQ<string>
This property is deprecated. Use the below logical padding props instead. If provided, applies padding to the teaser container.
heading object
typographyPreset MQ<string>
If provided, this overrides the typography preset applied to the TitleBar heading.
stylePreset MQ<string>
If provided, this overrides the typography preset applied to the TitleBar heading.
paddingInline MQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.
paddingInlineStart MQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.
paddingInlineEnd MQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.
paddingBlock MQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.
paddingBlockStart MQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.
paddingBlockEnd MQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.
marginInline MQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.
marginInlineStart MQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.
marginInlineEnd MQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.
marginBlock MQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.
marginBlockStart MQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.
marginBlockEnd MQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.
Refer to the defaults below for the object structure:
An error occurred loading this code example.
For more information about how to apply overrides to a component please refer to the
Override default preset page.
Playground 1 import React from 'react' ;
2 import { TitleBar } from 'newskit' ;
3
4 export default ( ) => (
5 < TitleBar headingAs = " h3 " > Title content </ TitleBar >
6 ) ;
7
For more information on overriding component defaults, see the docs here .
Anatomy Title Action items (optional) Container The container takes up the full width of the grid area that's specified for example 12 column, 6 column etc.
A border is applied at the bottom.
Title The title should provide context for the content that sits below the title bar.
Action Items Action items can include a button or a link. They are positioned to the right of the container and they vertically align to the position of the title.
If you are using one of our components you can style the Button or the Link as you like from their overrides.
We suggest you to use the style preset buttonSolidPrimary
and linkStandalone
respectively for a Button and a Link action.
Behaviour Action hidden at smaller breakpoints By default the action item is hidden on extra small breakpoint (xs). This is to allow the action to then be placed at the bottom of mobile list for a better UX.
Accessibility Your title should be 3:1 colour ratio against a the background colour to be AA WCAG compliant.