Dropdown Button Component

The Dropdown Button component is an interactive button that reveals a menu of actions or options when clicked, providing a dropdown interface for intuitive user interaction.

Usage

To import and use the Dropdown Button component in your application, use the following code snippet:

Demos

Explore the demos of the React Dropdown Button component. Refer to this page.

Props

The following table outlines the props for the Dropdown Button component:

NameTypeDefaultDescription
color
Color
Color.Primary

Specifies the color style of the Dropdown Button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error' and 'Info'.

icon
node
-

Specifies an icon for the Dropdown Button, defined using a CSS class name for custom styling or an SVG element for rendering.

iconPosition
Position
Position.Left

Specifies the position of the icon relative to the Dropdown Button text. Options include placing the icon at the left, right, top, or bottom of the button content.

itemTemplate
(item: ItemModel) => node
-

Provides a template for displaying content within the dropdown items.

items
ItemModel[]
[ ]

Specifies action items with their properties to render as a popup in the Dropdown Button.

lazyOpen
boolean
false

Controls whether the popup element is created upon clicking open. When set to true, the popup is created on click.

popupWidth
string | number
auto

This property defines the width of the dropdown popup for the Dropdown Button component. Set the width as a string or number using valid CSS units like px, %, or rem, or as pixels. The default value of auto allows the popup to adjust based on the content length, but a specific width can be provided for more precise control.

size
Size
Size.Medium

Specifies the size style of the Dropdown Button. Options include 'Small', 'Medium' and 'Large'.

target
React.RefObject<HTMLElement>
-

Specifies the target element for the Dropdown Button's popup content.

variant
Variant
Variant.Filled

Specifies the variant style of the Dropdown Button. Options include 'Outlined', 'Filled' and 'Standard'.

Methods

The following table outlines the methods for the Dropdown Button component:

NameParametersReturnsDescription
toggle
-
void

To open/close Dropdown Button popup based on current state of the Dropdown Button.

Events

The following table outlines the events for the Dropdown Button component:

NameTypeDescription
onClose
(event?: React.MouseEvent) => void

Triggers while closing the Dropdown Button popup.

onOpen
(event?: React.MouseEvent) => void

Triggers while opening the Dropdown Button popup.

onSelect
(event: ButtonSelectEvent) => void

Triggers while selecting action item in Dropdown Button popup.