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

Size

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

Show code

Links

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

Show code

Badge

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

Show code

Variant:solid

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

Show code

Variant:pastel

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

Show code

Variant:outline

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

Show code

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

Shadow:flat

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

Show code

Shadow:hover

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

Show code

Loading state

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

Show code

Disabled state

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

Show code

Button group

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

Show code

#<BaseButton>

Properties

rounded
The radius of the button.

@since

2.0.0

@default

'sm'

Show example
size
The size of the button

@default

'md'

Show example
type
The type of the button.
Show example
to
The location to which the button should navigate when clicked. This is only applicable if the button is a link.
Show example
href
Using href instead of to result in a native anchor with no router functionality.
Show example
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
target
The value of the 'target' attribute of the button. This attribute is used to specify where to open the linked document.
Show example
variant
The variant of the button..

@since

2.0.0

@default

'solid'

Show example
color
The color of the button.

@default

'default'

Show example
shadow
Adds a flat or a on hover shadow to the button.
Show example
badge
The button badge indicator
Show example
badge-pulse
Add a pulse animation on the badge
Show example
loading
Whether the button is in a loading state.
Show example
disabled
Whether the button should be disabled.
Show example

Slots

#default
Show example

#<BaseButtonGroup>

Slots

#default
Show example