# 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 onlywith 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