Button Dropdown

Display related but alternate actions for a button.

General

The basic ButtonDropdown usage.

Preview
See code

Loading

Show friendly load indicator.

Preview
See code

Disabled

Disable all buttons.

Preview
See code

Types

You can change the color of the ButtonDropdown with the property type.

Preview
See code

Multiple Type

Specify the status of a button individually.

Preview
See code

Custom Right Icon

The color and size of the right icon will be set automatically.

Preview
See code

APIs

ButtonDropdown.Props

AttributeDescriptionTypeAccepted valuesDefault
typebutton typeButtonDropdownTypesButtonDropdownTypesdefault
loadingdisplay loading indicatorboolean-false
autoautoscale widthboolean-false
disableddisable buttonboolean-false
iconcustom right iconReactNode-ButtonDropdownIcon
...native propsHTMLAttributes'autoFocus', 'name', 'className', ...-

ButtonDropdown.Item.Props

AttributeDescriptionTypeAccepted valuesDefault
typebutton typeButtonDropdownTypesButtonDropdownTypesdefault
mainthe main actionboolean-false
onClickevent handlerMouseEventHandler--
...native propsButtonHTMLAttributes'id', 'name', 'className', ...-

ButtonDropdownTypes

type ButtonDropdownTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'
Edit this page on GitHub

Previous

Button

Next

Button Group

MADE & DESIGNED WITHBY BRUNO ANDRADE
docs background gradient blue
docs background gradient violet