BaseDropButton

An Element to have the functionality of several buttons in one element

Props

Prop name	Description	Type	Values	Default
buttons	array of button options specify an array of strings naming the action (in case label and icon are handled via slot) or objects with action, label and icon (action and label may be customized via identifierPropertyName and labelPropertyName respectively)	array	-	[]
primaryButton	specify either a button object or the identifier value of one of the items in the buttons array that should be shown as primary button - always visible. in case a string is provided an object with that identifier should be present in the buttons array!	object|string	-	null
expandButtonLabel	add a description for the expand button - purely for accessibility functionalities	string	-	'Show more Options'
identifierPropertyName	specify a custom buttons array object property that should be used as identifier	string	-	'action'
labelPropertyName	specify a custom buttons array object property that should be used as label	string	-	'label'

Events

Event name	Properties	Description
clicked	undefined string - the action (string) that was provided for that button	fired upon any button click

Slots

Name	Description	Bindings
left-of-text	create custom content (e.g. icon) left of text
right-of-text	create custom content (e.g. icon) right of text

---

Demo

Examples on BaseDropButton usage

1. Have a buttons array and specify the primaryButton as string only
2. Have buttons array and primary button as object as well
3. Have objects with custom properties for button text and identifier
4. Have buttons array and primary button as object without the primary button being included in the buttons array
5. don't specify a primary button (first item in buttons array will be used)
6. don't specify a buttons array, which means button will appear like a regular base button (also possible: a buttons array with only one option that is also the primary option)
7. like example 1 but switch primary button from outside