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:
| Name | Type | Default | Description |
|---|---|---|---|
| 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.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 | [ ] | 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 |
| popupSettings | PopupSettings | {} | Specifies the popup settings including position, offset, collision handling, animation, and target element configuration. |
| size | Size.Medium | Specifies the size style of the Dropdown Button. Options include 'Small', 'Medium' and 'Large'. | |
| 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:
| Name | Parameters | Returns | Description |
|---|---|---|---|
| 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:
| Name | Type | Description |
|---|---|---|
| onClose | (event?: SyntheticEvent) => void | Triggers while closing the Dropdown Button popup. |
| onOpen | (event?: SyntheticEvent) => void | Triggers while opening the Dropdown Button popup. |
| onSelect | (event: ButtonSelectEvent) => void | Triggers while selecting action item in Dropdown Button popup. |