# BaseButton

Standard buttons

# Props

Prop name Description Type Values Default
text Button Text string - 'Submit'
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 'single'
iconColored display icon with app-color boolean - false
iconSize specify icon size
this will have no effect on button-style: secondary - 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
right-of-text create custom content (e.g. icon) right of text

# Demo

Button Single Style

Button Row Style

Button Secondary Style

Last Updated: 3/27/2023, 4:42:24 PM