SectionHeader

A section heading with its actions.

The heading that divides a page into sections. Pick the heading level with as.

export const client = "only";

import { SectionHeader } from "@squadbase/vantage/components";
import { Button } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-[36rem] space-y-8">
      <SectionHeader
        as="h2"
        title="地域別の内訳"
        description="売上の大きい順に並べています。"
        actions={<Button variant="outline" size="sm">CSV</Button>}
      />
      <SectionHeader as="h3" title="上位の顧客" />
    </div>
  );
}

import { SectionHeader } from "@squadbase/vantage/components";

PropType

title?string

The heading.

Typestring

description?string

Supporting text beneath it.

Typestring

actions?ReactNode

Rendered at the right.

TypeReactNode

as?"h1" | "h2" | "h3" | "h4"

Heading level; the type scale follows.

Type"h1" | "h2" | "h3" | "h4"

Default"h2"

className?string

Classes to add.

Typestring

For the page’s own title use PageShell’s header band. SectionHeader is for sections within it.