Section header | Arbol UI

Language

Appearance

Section with an action

Opening hours

When your agents answer calls and book appointments.

import { Button, SectionHeader } from '@arbol-ai/ui';

<SectionHeader
  action={
    <Button size="sm" variant="outline">
      Add hours
    </Button>
  }
  description="When your agents answer calls and book appointments."
  title="Opening hours"
/>

Panel eyebrow

For a panel whose content carries the weight, such as a feed of recent calls.

Recent calls

View all

Laura Gómez booked a check-up for Tuesday.

import { SectionEyebrow } from '@arbol-ai/ui';

<div className="rounded-card max-w-sm border p-4">
  <div className="flex items-baseline justify-between gap-4">
    <SectionEyebrow>Recent calls</SectionEyebrow>
    <a className="text-muted-foreground hover:text-foreground text-xs" href="#/section-header">
      View all
    </a>
  </div>
  <p className="mt-3 text-sm">Laura Gómez booked a check-up for Tuesday.</p>
</div>

Source

The examples above are src/components/section-header/section-header.examples.tsx, which the library’s tests render too.