Layout

Title stack

Aligns a page title, optional navigation or identity, description, and actions.

@dawn/ui/components/title-stack

Preview

Rendered from @dawn/ui

Appointments

Thursday, 23 July · 8 appointments

Usage

import { Button } from "@dawn/ui/components/button";
import {
  TitleStack,
  TitleStackAction,
  TitleStackContent,
  TitleStackDescription,
  TitleStackTitle,
} from "@dawn/ui/components/title-stack";

export const PageTitle = () => (
  <TitleStack>
    <TitleStackContent>
      <TitleStackTitle>Appointments</TitleStackTitle>
      <TitleStackDescription>Thursday, 23 July</TitleStackDescription>
    </TitleStackContent>
    <TitleStackAction>
      <Button>New appointment</Button>
    </TitleStackAction>
  </TitleStack>
);

API

TitleStackBackButton props: Renders the standard compact ghost action before the title.
TitleStackIcondiv props: Provides a muted square identity slot.
TitleStackActiondiv props: Right-aligns one or more page-level actions.

Exports

TitleStackTitleStackBackTitleStackIconTitleStackContentTitleStackTitleTitleStackDescriptionTitleStackAction