Components
The living gallery of the SMART tag design system — every component below is token-driven, dark-theme native, rendered from code, and mirrored in Figma.
Brand mark
The SMART tag logo mark — the amber wave on a dark neutral disc. Token-driven and sized via the class prop. Explore alternate silhouettes in the Icon Lab →
Buttons
The core action. Primary uses the brand gradient for the main action; Secondary and Ghost step down emphasis; Secondary danger stays neutral until interaction; Text uses a subtle translucent surface and brightens on interaction; Danger is destructive; Link is inline. Three sizes (SM / MD / LG).
Icon buttons
Square, icon-only actions for toolbars and dense spots. Same variants as Button, in three sizes (32 / 40 / 48). Always give them a tooltip or aria-label.
Badges
One tone-driven primitive, three variants — soft (calm dot chip for lists), solid (glanceable status pill), outline (bordered chip; the Tag basis). Six tones each: neutral, brand, success, warning, danger, info.
Tags
Removable label chips — the outline Badge + a hover-revealed × that deletes the chip (visual only). Used for user-entered labels. Hover a chip to reveal its remove control.
Avatars
Represents a person, with an image → initials → icon fallback. Sizes XS–XL, circle or square, an optional status ring and a presence dot. Overlap several into a group with a +N overflow.
Cards
A surface container on the dark elevation ladder. level sets the surface (surface / raised / overlay) and elevation the shadow (none / sm / md / lg). Padding comes from the content you put inside.
surface
elevation: none
surface
elevation: sm
surface
elevation: md
surface
elevation: lg
raised
elevation: none
raised
elevation: sm
raised
elevation: md
raised
elevation: lg
canvas
surface
raised
Form fields
Text Input, Textarea, and Select, wrapped by Field (label + helper / error text). Shared states: focus, disabled, invalid. Inputs come in SM / MD / LG.
Edit route
The vehicle assigned for this run.
Capacity must be a positive number.
States & sizes
Selection controls
Checkbox (any number), Radio (one of a set), and Switch (instant on / off). The whole padded row is the hit target; the control fills solid brand when on.
Checkbox
Radio
Switch
Tooltips
A short text label shown on hover or focus. Wrap an icon button and choose the side. Keep it to a label — for actions, use a Popover.
Popovers
A click-triggered floating panel for richer content — fields, filters, actions — on an opaque overlay surface with shadow.
Filter routes
A popover holds rich content — fields, actions, anything — on an opaque overlay surface with shadow, on the z-popover layer.
List rows
A composite row: [leading] · title / subtitle · [trailing], usually an Avatar and a Badge. States: hover, selected (brand left-accent + tint), and disabled.
Luciano Goyette
Grade 12 · STG-E5AILX
Kenneth Bashirian
Grade 9 · STG-4TD2S3
Tomas O'Keefe
Grade 4 · STG-IAQOJI
Erick Ruecker
Grade 10 · STG-DKYZIJ
Sibyl Daniel
Grade 3 · STG-KCH53A
Misty Cormier
Grade 9 · STG-RUAKLG
Map markers
The locked, token-driven marker components on a map-like backdrop — hover the route badges to see the morph. Rendered live in context on /map; mirrored in Figma "Map markers — locked".