Dropdown button

Since 1.3.0

Guidelines

Guidelines

Dropdown buttons are button elements that allow users to select an action from a list of options by clicking on a button and revealing a dropdown. Clicking on one of the exposed options triggers the action. We typically use dropdown buttons when no default action is available. Dropdown buttons typically group similar or related actions.

1. Button container
2. Button label
3. Chevron
4. Button icon

All the variants, options and states of the ix button component apply to the dropdown button. We've listed additional or deviating specifications here.

Options

• Label: Set a label for the dropdown button. We typically use short labels including verbs.
• Placement: Define where the dropdown appears when the button is active. Choose between different directions (top, bottom, left, right) and two options for alignment with the button (start, end). When there isn't enough space for the chosen placement, it's automatically corrected.

1. Bottom-end placement
2. Bottom-start placement

• For options of the dropdown triggered when pressing the button, please refer to our separate dropdown component guide.
• The options loading and type are not available for split buttons.

States

Dropdown buttons have five states: Default, hover, active, disabled and focused. In an active state, dropdown buttons show a dropdown with the available options. The visual appearance of the states is the same as the ix button component.

Dos and Don’ts

• Do use dropdown buttons when selecting an option triggers an action
• Don't use dropdown buttons when there is a frequent or most-important action (use a standard button or a split button instead)

Related patterns

• Button
• Dropdown
• Select
• Split button

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

Icon

PreviewAngularReactVueJavaScript

API

Properties

Name

Description and specifications

closeBehavior

Since 2.1.0

Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.

Attribute:

close-behavior

Type:

"both" ｜ "inside" ｜ "outside" ｜ boolean

Default:

'both'

disabled

Disable button

Attribute:

disabled

Type:

boolean

Default:

false

ghost

Button with no background or outline

Attribute:

ghost

Type:

boolean

Default:

false

icon

Button icon

Attribute:

icon

Type:

string ｜ undefined

label

Set label

Attribute:

label

Type:

string ｜ undefined

outline

Outline button

Attribute:

outline

Type:

boolean

Default:

false

placement

Since 2.0.0

Placement of the dropdown

Attribute:

placement

Type:

"bottom-end" ｜ "bottom-start" ｜ "left-end" ｜ "left-start" ｜ "right-end" ｜ "right-start" ｜ "top-end" ｜ "top-start" ｜ undefined

variant

Button variant

Attribute:

variant

Type:

"danger" ｜ "primary" ｜ "secondary"

Default:

'primary'

Events

No events available for this component.