| Button |
done |
contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth |
button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 |
Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. |
| IconButton |
review |
default, primary, secondary, error × small, medium, large |
Reuses button.height/iconSize tokens, color.interactive., color.neutral. |
Icon-only button (close, menu, actions). Wraps MUI IconButton. Rounded rect, brand hover, focus ring. |
| Typography |
done |
displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom |
typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display |
Text display system. Thin MUI wrapper with maxLines truncation. |
| Input |
done |
medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline |
input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary |
External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. |
| Badge |
review |
soft, filled × default, brand, success, warning, error, info × small, medium + icon |
badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 |
Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. |
| Icon |
planned |
various sizes |
|
Icon wrapper component |
| Avatar |
planned |
image, initials, icon × small, medium, large |
|
User/entity representation |
| Divider |
review |
horizontal, vertical × fullWidth, inset, middle + text, flexItem |
color.border.default (via palette.divider) |
Visual separator. Wraps MUI Divider. Supports text children and orientation. |
| Chip |
review |
filled, outlined × small, medium × clickable, deletable, selected × default, primary |
chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700 |
Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge). |
| Card |
done |
elevated, outlined × default, compact, none padding × interactive × selected |
card.borderRadius/padding/shadow/border/background, color.surface.raised/subtle/warm, color.border.default/brand, shadow.md/lg |
Content container. Elevated (shadow) or outlined (border). Interactive adds hover bg fill + shadow lift. Selected adds brand border + warm bg. Three padding presets. |
| Switch |
review |
bordered style × checked, unchecked, disabled |
switch.track.width/height/borderRadius, switch.thumb.size, color.interactive.*, color.neutral.400 |
Toggle for add-ons/options. Wraps MUI Switch. Bordered pill, brand.500 fill when active. From Parsons 1.0 Figma Style One. |
| Radio |
review |
checked, unchecked, disabled |
radio.size/dotSize, color.interactive.*, color.neutral.400 |
Single-select option. Wraps MUI Radio. Brand.500 fill when selected. From Parsons 1.0 Figma. |
| ColourToggle |
planned |
inactive, hover, active, locked × single, two-colour × desktop, mobile |
|
Circular colour swatch picker for products. Custom component. Deferred until product detail organisms. |
| Slider |
planned |
single, range × desktop, mobile |
|
Price range filter. Wraps MUI Slider. Deferred until search/filtering molecules. |
| Link |
review |
underline: hover/always/none × any MUI colour |
color.text.brand (copper brand.600, 4.8:1), color.interactive.active |
Navigation text link. Wraps MUI Link. Copper default, underline on hover, focus ring. |
Richie
dccf8e6514