Spinner
Spinners communicate that content or an action is loading. Use them when the wait time is unknown or likely to be short.
Sizes
Two sizes are available. Use sm for inline or compact contexts and md as the default.
With label
Pass a label to display descriptive text below the spinner.
Inside a button
Spinners inherit the current color, so they adapt automatically when placed inside other components. Use the icon prop on Button to show a loading state.
Greenhouse examples
Use spinners alongside status text to give users context on what is loading.
Usage
Use size to control the spinner dimensions. Pass a label to display descriptive text below the spinner. The spinner inherits the current text color, so it adapts automatically to any context it is placed in. When used inside a Button, pass it via the icon prop.
Explore the Spinner component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Properties
<Spinner />