SectionHeader

セクションの見出しとアクション。

ページの中でセクションを区切る見出しです。見出しレベルは 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

見出し。

Typestring

description?string

見出しの下の補足文。

Typestring

actions?ReactNode

右端に置く要素。

TypeReactNode

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

見出しレベル。文字サイズも一緒に変わる。

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

Default"h2"

className?string

足すクラス。

Typestring

ページ全体の見出しには PageShell のヘッダー帯を使ってください。 SectionHeader はその中のセクション向けです。