Documentation
Documentation Hub

BaseButton

Buttons shapes

Buttons are an essential part of any application. Buttons can have different shapes using the shape prop.

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

Buttons links

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

Show code

Solid buttons

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

Show code

Smaller solid buttons

Buttons can have a smaller size. Use the size prop with the sm value to make smaller buttons.

Show code

Pastel buttons

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

Show code

Smaller pastel buttons

Buttons can have a smaller size. Use the size prop with the sm value to make smaller buttons.

Show code

Outline buttons

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

Show code

Smaller outline buttons

Buttons can have a smaller size. Use the size prop with the sm value to make smaller buttons.

Show code

Loading state

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

Show code

With 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

Flat shadow

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

Show code

Hover shadow

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

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 the BaseButtonGroup component.

Show code

#<BaseButton>

PropertiesΒΆ

type
The type of the button. Can be 'button', 'submit', or 'reset'.
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
size
The size 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
color
The color of the button. Can be 'default', 'primary', 'info', 'success', 'warning', 'danger', or 'none.
Show example
shape
The shape of the button. Can be 'straight', 'rounded', 'curved', or 'full'.
Show example
disabled
Whether the button should be disabled.
Show example
href
Using href instead of to result in a native anchor with no router functionality.
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
flavor
The flavor of the button. Can be 'solid', 'outline', or 'pastel'.
Show example
badge
The badge indicator
Show example
badge-pulse
Add a pulse animation on the badge
Show example
shadow
Adds a flat or a on hover shadow to the button.
Show example
loading
Whether the button is in a loading state.
Show example

SlotsΒΆ

#default
Show example