Documentation
Documentation Hub

BaseButtonIcon

Buttons shapes

Icon buttons are a quick and visual way to express an action. Icon buttons can have different shapes using the shape prop.

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

Small buttons

Icon buttons can have a smaller size using the size prop with the sm value.

Show code

Primary color

Icon buttons can have different colors. The following example shows a primary button, using the color prop.

Show code

Muted color

Icon buttons can have different colors. The following example shows a muted button, using the color prop.

Show code

Loading state

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

Show code

Button group

Icon buttons can be grouped into a single element using the BaseButtonGroup component.

Show code

#<BaseButtonIcon>

Properties

type
The type of button. If this is not set and the `to` property is set, the component will be treated as a link.
Show example
rel
The value for the `rel` attribute on the button or link. This property is only relevant for links.
Show example
size
The size of the button.
Show example
to
The route to navigate to when the button or link is clicked. If this is set and the `type` property is not set, the component will be treated as a link.
Show example
color
The color of the button.
Show example
shape
The shape of the button or link.
Show example
loading
Whether the button or link is in a loading state.
Show example
href
Using href instead of to result in a native anchor with no router functionality.
Show example
target
The value for the `target` attribute on the button or link. This property is only relevant for links.
Show example
disabled
Whether the button or link is disabled.
Show example

Slots

#default
Show example