ComponentsNew
Expanding Toolbar
A bar of icon buttons: on hover or focus a button widens and shows its label. The tooltip lives inside the button, no popups.
Customize
color
activeBackground
borderColor
Based on ordinary-owl-54 by csemszepp (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | ExpandingToolbarItem[] | — | Buttons on the left: icon, label and click handler. |
| endItems | ExpandingToolbarItem[] | — | Buttons on the right, after a divider. |
| width | number | 360 | Width of the whole bar in pixels. |
| expandedWidth | number | 142 | Width of an open button in pixels. |
| color | string | "#d4d4d4" | Icon and label color. |
| activeBackground | string | "rgba(255, 255, 255, 0.08)" | Background of the open button. |
| borderColor | string | "rgba(255, 255, 255, 0.14)" | Color of the frame and the divider. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge