Displays a progress indicator for indeterminate tasks.
<Spinner />
size
Responsive<"1" | "2" | "3">
"2"
This component is based on the span element and also supports common margin props m, mx, my, ml, mr, mt, mb. View source
span
m
mx
my
ml
mr
mt
mb
Use the size prop to control the size of the spinner. You can change the spinner size across breakpoints using the object syntax.
<Flex align="center" gap="4"> <Spinner size="1" /> <Spinner size="2" /> <Spinner size="3" /> </Flex>
The spinner sizes match available form element sizes in the design system.
<Flex align="center" gap="4"> <TextField.Root size="1" defaultValue="horsebatterystaple" type="password"> <TextField.Slot side="right"> <Spinner size="1" /> </TextField.Slot> </TextField.Root> <TextField.Root size="2" defaultValue="horsebatterystaple" type="password"> <TextField.Slot side="right"> <Spinner size="2" /> </TextField.Slot> </TextField.Root> <TextField.Root size="3" defaultValue="horsebatterystaple" type="password"> <TextField.Slot side="right"> <Spinner size="3" /> </TextField.Slot> </TextField.Root> </Flex>