BaseButton

Standard buttons

Props

Prop name	Description	Type	Values	Default
text	Button Text if button text is left empty and slot text is not used (so this is a button only with an icon) please set at least the prop description or iconTitle for accessibility reasons!	string	-	''
icon	icon displayed see BaseIcon for available icons	string	-	null
hideIcon	set from outside if icon should be made invisible	boolean	-	false
iconPosition	specify if icon should be displayed left or right	string	top, right, left	'left'
active	set button active (will display a colored border on botton) (row style) or keep icon colored (single style)	boolean	-	false
buttonStyle	specify a button style	string	single, row, secondary, circle	'single'
iconColored	display icon with app-color	boolean	-	false
iconSize	specify icon size Caveat: this will have no effect on buttonStyle: secondary | circle - icon will always be small	string	small, large	'small'
iconTitle	set a title for the icon that is shown as a tooltip on hover	string	-	''
disabled	set button inactive	boolean	-	false
buttonType	set button type	string	-	'button'
alignText	define alignment of button content Info: has no effect, if iconPosition 'top' is set	string	center, left, right	'center'
hasBackgroundColor	background color is fixed however at least possibility to display transparent instead	boolean	-	true
showTooltip	show tooltip	boolean	-	false
description	Add a button description to be used by aria-describedby	string	-	''
buttonTextWrap	set false if button text should not be wrapped	boolean	-	true

Events

Event name	Properties	Description
clicked	undefined Event - the native click event	triggered on button click

Slots

Name	Description	Bindings
left-of-text	create custom content (e.g. icon) left of text
text	have your own text element which also allows for easier custom styling.	label-id string, number - If you are using this slot please also set the id of your custom element to label-id since this id is used for the <button> aria-labelledby attribute
right-of-text	create custom content (e.g. icon) right of text

---

Demo

Button Single Style

Button Row Style

Button Secondary Style

Button Circle Style