No Preview

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

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:

  1. 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.
  2. 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.
  3. 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.

IconButton

This component looks just like an icon but behaves like a button. It fulfils an action when you click it and has a hover as well a focus states. You can choose which icon size you would like to use.

IconButton is best used when you only want an icon instead of a button with text, for example when you want to place a solitary clickable icon next to text. An example where an IconButton is used in Grafana is the hamburger icon at the top left which opens the new navigation. When using IconButton right next to a text element consider wrapping both in a flex container and use align-items: center; to make them align properly.

There are two options to use the IconButton:

  • with Tooltip: This is the preferred option since we don't want to rely on assumptions when it comes to the meaning an Icon has. Add a text for the Tooltip. It will be used for the aria-label as well.
  • without Tooltip: This is an option for use cases where the Icon is unambiguous e.g for expanding a folder. Add a text for the aria-label and there will not be a Tooltip.

The IconButton used to have a property called ariaLabel which got deprecated. You can now use the regular property aria-label instead.

NameDescriptionDefault
tooltip*
Tooltip content to display on hover and as the aria-label
PopoverContent
-
tooltipPlacement
Position of the tooltip
"auto""bottom""top""left""right""bottom-start""bottom-end""top-start"
-
name*
Name of the icon *
"play""google""microsoft""github""gitlab""okta""discord""hipchat"
-
size
Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl
"xs""sm""md""lg""xl""xxl""xxxl"
-
iconType
Type of the icon - mono or default
"solid""default""mono"
-
variant
Variant to change the color of the Icon
"primary""secondary""destructive"
-
ariaLabel
string
Deprecated: use aria-label instead
-
aria-label*
Text available only for screen readers. No tooltip will be set in this case.
string
-