Toolbar

A container for grouping a set of controls, like buttons, toggles or menus.

Props#

The Toolbar renders a ButtonGroup and accepts all ButtonGroup properties.

Prop	Type	Default	Description
label`required`	`string`
icon	`ReactElement<any, string \| JSXElementConstructor<any>>`
iconSpacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`		The space between the button icon and label.
isActive	`boolean`	`false`	If `true`, the button will be styled in its active state.
isDisabled	`boolean`	`false`	If `true`, the button will be disabled.
isLoading	`boolean`	`false`	If `true`, the button will show a spinner.
leftIcon	`ReactElement<any, string \| JSXElementConstructor<any>>`		If added, the button will show an icon before the button's label.
loadingText	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`		The label to show in the button when `isLoading` is true If no text is passed, it only shows the spinner
rightIcon	`ReactElement<any, string \| JSXElementConstructor<any>>`		If added, the button will show an icon after the button's label.
spinner	`ReactElement<any, string \| JSXElementConstructor<any>>`		Replace the spinner component when `isLoading` is set to `true`
spinnerPlacement	`"start" \| "end"`	`start`	It determines the placement of the spinner when isLoading is true
tooltipProps	`Omit<TooltipProps, "children">`

The ToolbarGroup renders a ButtonGroup and accepts all ButtonGroup properties.

Prop	Type	Default	Description
defaultValue	`string \| string[]`
isAttached	`boolean`	`false`	If `true`, the borderRadius of button that are direct children will be altered to look flushed together
isDisabled	`boolean`	`false`	If `true`, all wrapped button will be disabled
onChange	`(value: string \| string[]) => void`
spacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`	`'0.5rem'`	The spacing between the buttons
type	`"radio" \| "checkbox"`
value	`string \| string[]`

Prop	Type	Default	Description
label`required`	`string`
icon	`ReactElement<any, string \| JSXElementConstructor<any>>`
iconSpacing	`ResponsiveValue<number \| "px" \| (string & {}) \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "auto" \| "1" \| "-1" \| "2" \| "-2" \| "3" \| "-3" \| "4" \| "-4" \| "5" \| "-5" \| ... 54 more ... \| "-3.5">`		The space between the button icon and label.
isActive	`boolean`	`false`	If `true`, the button will be styled in its active state.
isChecked	`boolean`
isDisabled	`boolean`	`false`	If `true`, the button will be disabled.
isLoading	`boolean`	`false`	If `true`, the button will show a spinner.
leftIcon	`ReactElement<any, string \| JSXElementConstructor<any>>`		If added, the button will show an icon before the button's label.
loadingText	`type ONLY_FOR_FORMAT = \| string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| PromiseLikeOfReactNode`		The label to show in the button when `isLoading` is true If no text is passed, it only shows the spinner
rightIcon	`ReactElement<any, string \| JSXElementConstructor<any>>`		If added, the button will show an icon after the button's label.
spinner	`ReactElement<any, string \| JSXElementConstructor<any>>`		Replace the spinner component when `isLoading` is set to `true`
spinnerPlacement	`"start" \| "end"`	`start`	It determines the placement of the spinner when isLoading is true
tooltipProps	`Omit<TooltipProps, "children">`
type	`"radio" \| "checkbox"`
value	`string`

Was this helpful?