路線チップLineChipExperimental
The transit line / route identity chip: a small pill showing a line/route number (渋66 / 東98 / JY / 丸ノ内線) in the line's official brand colour, with auto-contrast text (black/white by luminance) so it stays readable on any hue. The label carries the meaning, so it works colour-blind / in mono — colour is decoration. The IDENTITY counterpart to Badge (a status/semantic tone): this keys a chip to a transit line. For approach lists, route candidates, leg details, run-diagram labels — rail / bus / subway. label + optional color (hex) + optional icon; omit color for a neutral chip. RSC-safe.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| label | ReactNode | - | 路線/系統の識別子（渋66 / JY / 丸ノ内線）。色に依存せず意味を担う。 |
| color | string | - | 路線のブランド色を hex で（#e60012）。塗りつぶし＋自動コントラスト文字（輝度で黒/白）。非hex/省略は中立チップ。 |
| icon | ReactNode | - | 先頭アイコン（モード記号など）。 |
| size | "sm" | "default" | "default" | チップサイズ。 |
Usage
import { LineChip } from "@gunjo/ui"
// Filled with the line's brand colour — text auto-contrasts (black/white by luminance).
<LineChip label="渋88" color="#e60012" />
<LineChip label="JY" color="#9acd32" /> // light hue → black text
<LineChip label="路線色なし" /> // no colour → neutral chip (label still reads)
// In a ListCard leading slot / a route candidate / a leg row:
<ListCard leading={<LineChip label="宿51" color="#0079c2" />} title="新宿駅西口 → 練馬車庫" />