Bus number chip
Bus route number in a red rectangle. Fixed width, optically centred.
Used byBus Arrivals
Preview
Installable via shadcn CLI
Installation
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/bus-number-chip.jsonPrimitive
Bus route number in a red rectangle. Fixed width, optically centred.
pnpm dlx shadcn@latest add https://tfl.manglekuo.com/r/bus-number-chip.jsonTfL bus red, fixed 5ch, centred route code. Same cap text-box trim as the platform chip, so glyphs sit optically in the middle of the rectangle. Label casing is unchanged.
import { BusNumberChip } from "@/components/tfl/arrivals/bus-number-chip"
export default function Row() {
return <BusNumberChip label="N253" />
}| Prop | Type | Description |
|---|---|---|
label | string | Route code (73, N253, EL1). |
className | string | Optional class merge. |
aria-label is Route {label}. Route codes are expected at most 4 characters inside the fixed width. Square corners, no rounded-* by default. Fill is TFL_MODAL_COLOURS.buses.
TfL bus red, fixed 5ch, centred route code. Same cap text-box trim as the platform chip, so glyphs sit optically in the middle of the rectangle. Label casing is unchanged.
import { BusNumberChip } from "@/components/tfl/arrivals/bus-number-chip"
export default function Row() {
return <BusNumberChip label="N253" />
}| Prop | Type | Description |
|---|---|---|
label | string | Route code (73, N253, EL1). |
className | string | Optional class merge. |
aria-label is Route {label}. Route codes are expected at most 4 characters inside the fixed width. Square corners, no rounded-* by default. Fill is TFL_MODAL_COLOURS.buses.