Spinner
An indicator that shows something is loading.
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinner';
export default function SpinnerDemo() {
return (
<Button disabled>
<Spinner /> Loading…
</Button>
);
}
Install
npx @madeui/cli add spinnerUsage
import { Spinner } from '@/components/ui/spinner';Sizes
The spinner is 16px (icon.md) by default. Pass another icon.* size from
@/lib/stylex-utils through style to resize it.
import * as stylex from '@stylexjs/stylex';
import { Spinner } from '@/components/ui/spinner';
import { space } from '@/lib/constants.stylex';
import { icon } from '@/lib/stylex-utils';
export default function SpinnerSizes() {
return (
<div {...stylex.props(styles.row)}>
<Spinner style={icon.xs} />
<Spinner />
<Spinner style={icon.lg} />
</div>
);
}
const styles = stylex.create({
row: {
alignItems: 'center',
display: 'flex',
gap: space.s4,
},
});
Composition
Spinner inherits currentColor, so it drops into any text-colored
container — a Badge, a line of body text, anywhere.
Syncing
Fetching the latest results…
import * as stylex from '@stylexjs/stylex';
import { Badge } from '@/components/ui/badge';
import { Spinner } from '@/components/ui/spinner';
import { space } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';
export default function SpinnerComposition() {
return (
<div {...stylex.props(styles.stack)}>
<Badge variant="secondary">
<Spinner width="12" height="12" />
Syncing
</Badge>
<p {...stylex.props(styles.line)}>
<Spinner />
Fetching the latest results…
</p>
</div>
);
}
const styles = stylex.create({
stack: {
alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
gap: space.s4,
},
line: {
alignItems: 'center',
color: colors.mutedForeground,
display: 'flex',
gap: space.s2,
margin: 0,
},
});
API reference
A lucide LoaderCircle with a spin animation, sized 16px and colored via currentColor — it inherits the surrounding text color (e.g. inside a Button). Accepts SVG props plus a style prop (StyleXStyles, merged last).