Button
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>