Stepsステップ
プロセスの手順や進行状況を段階的に示すコンポーネントです。
更新 2026/5/20
タイプ
DefaultとSubtleの2種類があります。
- Default
- Subtle
import { Steps } from "@serendie/ui";
import { css } from "styled-system/css";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";
const items = [
{ title: "ステップ1", description: "補足テキスト" },
{ title: "ステップ2", description: "補足テキスト" },
{ title: "ステップ3", description: "補足テキスト" },
];
export function TypeSample() {
return (
<Dl>
<Dt>Default</Dt>
<Dd>
<Steps
items={items}
direction="horizontal"
type="default"
step={1}
className={css({ width: "100%" })}
/>
</Dd>
<Dt>Subtle</Dt>
<Dd>
<Steps
items={items}
direction="horizontal"
type="subtle"
step={1}
className={css({ width: "100%" })}
/>
</Dd>
</Dl>
);
}方向
HorizontalとVerticalの2種類があります。
- Horizontal
- Vertical
import { Steps } from "@serendie/ui";
import { css } from "styled-system/css";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";
const items = [
{ title: "ステップ1", description: "補足テキスト" },
{ title: "ステップ2", description: "補足テキスト" },
{ title: "ステップ3", description: "補足テキスト" },
];
export function DirectionSample() {
return (
<Dl>
<Dt>Horizontal</Dt>
<Dd>
<Steps
items={items}
direction="horizontal"
type="default"
step={1}
className={css({ width: "100%" })}
/>
</Dd>
<Dt>Vertical</Dt>
<Dd>
<Steps
items={items}
direction="vertical"
type="default"
step={1}
className={css({ width: "100%" })}
/>
</Dd>
</Dl>
);
}