BaseSwitchButton

accessible tab switch buttons

Props

Prop name	Description	Type	Values	Default
disabled	set true if the buttons should be visible but disabled, so they will appear greyed out and not be clickable	boolean	-	false
iconPosition	specify where the icon should be rendered	string	right, left	'right'
iconSize	specify icon size this prop currently only applies to type 'prominent'	string	small, medium, large	'medium'
label	set a label for the switches, not visible per default (set showLabel to true if label should be shown) but required for accessibility	string	-
modelValue	set the currently active tab (specify the value of the object not the label)	string	-
options	specify the tabs as array of object with value, label and (optional) icon properties	array	-	[{ label: 'tab', value: 'tab', icon: '' }]
showButtonsLabel	define if the label of the single buttons should be shown (or just icons). This property is default undefined and is determined internally individually for each type: normal: default is true prominent: default is false	boolean	-	undefined
showLabel	set if the switch label is shown	boolean	-	false
type	set a type for the button's active state rendering style normal: gives the switch a more subtle, more condensed look with active item only indicated by grey border, buttons have a label per default (showButtonsLabel is true). prominent: larger buttons with more spacing and permanent border around each item, active item is indicated by a 2px (app-)colored bottom border, button labels are not shown per default (showButtonsLabel is false) so the property icon should be set for each switch item in options.	string	normal, prominent	'normal'

Events

Event name	Properties	Description
update:model-value	undefined string - the value of the selected option object	Event emitted on options switch, value of options object is emitted

Slots

Name	Description	Bindings
right-of-content	slot to display something right of text (e.g. icon), or if showButtonsLabel false - generally right of the button content	value string - the value of the option object

---

Demo

Type: normal

Type normal gives the switch a more subtle, more condensed look with active item only indicated by grey border, buttons have a label per default (showButtonsLabel is true).

Type: prominent

Type prominent has larger buttons with more spacing and permanent border around each item, active item is indicated by a 2px (app-)colored bottom border, button labels are not shown per default (showButtonsLabel is false) so the property icon should be set for each switch item in options.