Pesto UI

Icon Rail

A narrow vertical strip of icon-only destinations — what a sidebar collapses to, or a persistent app-level switcher beside one. Each item is a real button with a required accessible name.

tsx
import { IconRail, IconRailItem, IconRailSpacer } from "@pestoui/core"

Destinations

active paints the filled pill and sets aria-current. IconRailSpacer eats the leftover height, pushing what follows to the bottom. The rail's height is the caller's.

Surfaces and sizes

surface="dark" paints the rail from the inverse end of the neutral ramp. size="sm" is a 48px rail with 32px items.

Props

PropTypeDefaultDescription
srLabelstring—On IconRail. Required. Names the nav landmark — a rail has no visible heading to take a name from.
surface"light" | "dark""light"On IconRail. A card-coloured strip with a hairline, or the inverse surface.
size"sm" | "default""default"On IconRail. 48px wide with 32px items, or 56px wide with 40px items.
iconReactNode—On IconRailItem. Required. The bare icon — the rail sizes it.
IconRailItem srLabelstring—On IconRailItem. Required. The button's accessible name.
activebooleanfalseOn IconRailItem. The current destination: filled pill and aria-current="page".
childrenReactNode—On IconRailItem. Stacked with the icon inside the button — an absolutely positioned unread dot, for instance.
…propsReact.ComponentProps<"button">—On IconRailItem. onClick, disabled and the rest; the ref is forwarded, so TooltipTrigger asChild wraps one directly.
PreviousHover CardNext Icon Tile

Pesto UI · 117 documented components