Documentation
Documentation Hub

Radius

Buttons are an essential part of any application. Buttons can have different radius factors using the rounded prop.

Default props of all <BaseButton> can be set in your <app>/app.config.ts.
Show code
vue

Size

Buttons can have a smaller size. Use the size prop to change the size of a button.

Show code
vue

Links

Buttons can be rendered as links. Use the to prop to set the link target url.

Show code
vue

Badge

Buttons can have a glowing badge indicator. Use the badge prop to add a badge to your buttons.

Show code
vue

Variant:solid

Buttons can have solid background colors. Use the variant="solid" prop and the color prop to make solid buttons.

Show code
vue

Variant:pastel

Buttons can have pastel background colors. Use the variant="pastel" prop and the color prop to make pastel buttons.

Show code
vue

Variant:outline

Buttons can have outline background colors. Use the variant="outline" prop and the color prop to make outline buttons.

Show code
vue

Icons

Buttons can have icons, both on the left and on the right. Use the Icon component inside the button slot to render the icon you need.

Show code
vue

Shadow:flat

Buttons can have a flat shadow. Use the shadow="flat" prop to add shadows to your buttons.

Show code
vue

Shadow:hover

Buttons can have a hover shadow. Use the shadow="hover" prop to add shadows to your buttons.

Show code
vue

Loading state

Buttons can be shown in a loading state. Use the loading prop to show a loading indicator.

Show code
vue

Disabled state

Buttons can be shown in a disabled state. Use the disabled prop to disable the button.

Show code
vue

Button group

Buttons can be grouped together. Use them inside a BaseButtonGroup component.

Show code
vue

#<BaseButton>

•Properties

badge
The button badge indicator
Show example
vue
badge-pulse
Add a pulse animation on the badge
Show example
vue
disabled
Whether the button should be disabled.
Show example
vue
href
Using href instead of to result in a native anchor with no router functionality.
Show example
vue
loading
Whether the button is in a loading state.
Show example
vue
rel
The value of the 'rel' attribute of the button. This attribute is used to specify the relationship of the linked document with the current document.
Show example
vue
shadow
Adds a flat or a on hover shadow to the button.
Show example
vue
target
The value of the 'target' attribute of the button. This attribute is used to specify where to open the linked document.
Show example
vue
to
The location to which the button should navigate when clicked. This is only applicable if the button is a link.
Show example
vue
type
The type of the button.
Show example
vue

•Properties (with app.config)

color
The color of the button.
Show example
vue
rounded
The radius of the button.

@since

2.0.0

Show example
vue
size
The size of the button
Show example
vue
variant
The variant of the button..

@since

2.0.0

Show example
vue

•Slots

#default
This slot has no inherted props
Show example
vue

•Exposed

color
The color of the button.
Show example
vue
rounded
The radius of the button.
Show example
vue
size
The size of the button
Show example
vue
variant
The variant of the button..
Show example
vue

#<BaseButtonGroup>

•Slots

#default
This slot has no inherted props
Show example
vue