Button
Renders as <button>. Sharp corners, uppercase, bold, tight letter-spacing - matching the Kinetic Architecture aesthetic.
Renders as <button>. Sharp corners, uppercase, bold, tight letter-spacing - matching the Kinetic Architecture aesthetic. Supports three visual variants, six semantic color palettes, three sizes, start/end icon slots, full-width mode, and a loading state with configurable indicator position.
Button is the reference implementation for theme-level customization: theme.components.Button supports defaultProps, per-slot styleOverrides (root / label / icon), and theme-contributed variants - see docs/customization.md.
Examples
Default
<Button variant="contained" color="primary" size="md">Action</Button>
Variants
<Flex flexDirection="row" gap={2} flexWrap="wrap"> <Button variant="contained">Contained</Button> <Button variant="outlined">Outlined</Button> <Button variant="text">Text</Button> </Flex>
Colors
primary
secondary
success
error
info
warning
<Flex flexDirection="column" gap={3}> {(['primary', 'secondary', 'success', 'error', 'info', 'warning'] as const).map((color) => ( <Flex key={color} flexDirection="row" gap={2} alignItems="center" flexWrap="wrap"> <Typography variant="caption" color="secondary" width="6rem" flexShrink={0} m={0}> {color} </Typography> <Button variant="contained" color={color}> Contained </Button> <Button variant="outlined" color={color}> Outlined </Button> <Button variant="text" color={color}> Text </Button> </Flex> ))} </Flex>
Sizes
<Flex flexDirection="row" gap={2} alignItems="center" flexWrap="wrap"> <Button size="sm">Small</Button> <Button size="md">Medium</Button> <Button size="lg">Large</Button> </Flex>
With Icons
<Flex flexDirection="column" gap={2}> <Flex flexDirection="row" gap={2} flexWrap="wrap"> <Button startIcon={<span>▶</span>}>Start Icon</Button> <Button endIcon={<span>◀</span>}>End Icon</Button> <Button startIcon={<span>▶</span>} endIcon={<span>◀</span>}> Both Icons </Button> </Flex> <Flex flexDirection="row" gap={2} flexWrap="wrap"> <Button variant="outlined" startIcon={<span>+</span>}> New Item </Button> <Button variant="text" endIcon={<span>→</span>}> Learn More </Button> </Flex> </Flex>
Loading
start
center
end
<Flex flexDirection="column" gap={3}> {(['start', 'center', 'end'] as const).map((pos) => ( <Flex key={pos} flexDirection="row" gap={2} alignItems="center"> <Typography variant="caption" color="secondary" width="4rem" flexShrink={0} m={0}> {pos} </Typography> <Button loading loadingPosition={pos} startIcon={<span>▶</span>}> Deploy </Button> <Button loading loadingPosition={pos} variant="outlined"> Deploy </Button> <Button loading loadingPosition={pos} variant="text"> Deploy </Button> </Flex> ))} </Flex>
Disabled
<Flex flexDirection="row" gap={2} flexWrap="wrap"> <Button disabled variant="contained"> Contained </Button> <Button disabled variant="outlined"> Outlined </Button> <Button disabled variant="text"> Text </Button> </Flex>
As Link (href)
Full Width
<Flex flexDirection="column" gap={2} maxWidth="480px"> <Button fullWidth>Full Width Contained</Button> <Button fullWidth variant="outlined"> Full Width Outlined </Button> </Flex>
Shapes
square
rounded
pill
rounded - borderRadius override
<Flex flexDirection="column" gap={3}> {(['square', 'rounded', 'pill'] as const).map((shape) => ( <Flex key={shape} flexDirection="row" gap={2} alignItems="center" flexWrap="wrap"> <Typography variant="caption" color="secondary" width="5rem" flexShrink={0} m={0}> {shape} </Typography> <Button shape={shape}>Contained</Button> <Button shape={shape} variant="outlined"> Outlined </Button> <Button shape={shape} variant="text"> Text </Button> </Flex> ))} <Flex flexDirection="column" gap={2}> <Typography variant="caption" color="secondary" m={0}> rounded - borderRadius override </Typography> <Flex flexDirection="row" gap={2} flexWrap="wrap"> <Button shape="rounded" borderRadius="sm"> sm (4px) </Button> <Button shape="rounded" borderRadius="md"> md (8px) </Button> <Button shape="rounded" borderRadius="lg"> lg (16px) </Button> </Flex> </Flex> </Flex>
Custom - Rainbow Border
<Flex flexDirection="column" gap={4}> <Flex flexDirection="row" gap={3} alignItems="center"> <Button variant="text" shape="pill" letterSpacing="normal" fontWeight="medium" className={rainbowBorderClass()} > Get started </Button> <Button variant="text" shape="pill" letterSpacing="normal" fontWeight="medium" className={rainbowBorderClass({ speed: '4s' })} > Slow (4s) </Button> <Button variant="text" shape="pill" letterSpacing="normal" fontWeight="medium" disabled className={rainbowBorderClass()} > Disabled </Button> </Flex> <Flex flexDirection="row" gap={3} alignItems="center"> <Button variant="text" shape="pill" letterSpacing="normal" fontWeight="medium" className={rainbowBorderClass({ colors: [ baseTheme.palette.primary.main, baseTheme.palette.secondary.main, baseTheme.palette.primary.main, ], })} > Theme colors </Button> <Button variant="text" shape="pill" letterSpacing="normal" fontWeight="medium" className={rainbowBorderClass({ colors: [ baseTheme.palette.error.main, baseTheme.palette.warning.main, baseTheme.palette.error.main, ], speed: '1s', })} > Fast warm </Button> </Flex> </Flex>