Name	Description	Default	Control
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

No Preview

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Migration guide

Deprecated components

Cycle button: Use the quiet variant of action button with the appropriate icon(s) instead. Any icon swapping that happens on-click/on-key should be handled by the implementation.
Quick actions: Use an action bar to allow users to perform actions on either a single or multiple items at the same time, instead.
Search within: Use a search field with a separate control to filter the search instead.
Split button: Use a button group to show any additional actions related to the most critical action. Reference Spectrum documentation for more information.

Grays

Gray migration guide

Examples of using the new grays

Gray-25, -50, and -75 are reserved for background layers.
Gray-100, -200, and -300 are used for lower contrast component background progressions or borders.
Gray-800 and -900 are used for higher contrast component backgrounds such as text and active borders. This ensures that components are always visible, regardless of the background color.

Transparent colors

Transparent white

		Spectrum 2	Spectrum 1
Color	Value	Opacity	Opacity
transparent-white	25	0
transparent-white	50	0.04
transparent-white	75	0.07
transparent-white	100	0.11	0
transparent-white	200	0.14	0.1
transparent-white	300	0.17	0.25
transparent-white	400	0.21	0.4
transparent-white	500	0.39	0.55
transparent-white	600	0.51	0.7
transparent-white	700	0.66	0.8
transparent-white	800	0.85	0.9
transparent-white	900	0.94	1
transparent-white	1000	1

Transparent black

		Spectrum 2	Spectrum 1
Color	Value	Opacity	Opacity
transparent-black	25	0
transparent-black	50	0.03
transparent-black	75	0.05
transparent-black	100	0.09	0
transparent-black	200	0.12	0.1
transparent-black	300	0.15	0.25
transparent-black	400	0.22	0.4
transparent-black	500	0.44	0.55
transparent-black	600	0.56	0.7
transparent-black	700	0.69	0.8
transparent-black	800	0.84	0.9
transparent-black	900	0.93	1
transparent-black	1000	1