Documentation
Documentation Hub

Radius

Icon buttons are a quick and visual way to express an action. Icon buttons can have different radius factors using the rounded prop.

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

Size

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

Show code

Color:default

Icon buttons can have different colors. The following example shows a default 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

Color:primary

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

Show code

Color:info

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

Show code

Color:success

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

Show code

Color:warning

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

Show code

Color:danger

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

Show code

State:loading

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

Show code

State:disabled

Icon buttons can be shown in a disabled state. Use the disabled prop to show a disabled button.

Show code

Button group

Icon buttons can be grouped into a single element using a flex container. Adjust border radiuses and borders to create a seamless group.

Show code

#<BaseButtonIcon>

PropertiesΒΆ

rounded
The radius of the button or link.

@since

2.0.0

@default

'sm'

Show example
size
The size of the button.

@default

'md'

Show example
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
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
href
Using href instead of to result in a native anchor with no router functionality.
Show example
rel
The value for the `rel` attribute on the button or link. This property is only relevant for links.
Show example
target
The value for the `target` attribute on the button or link. This property is only relevant for links.
Show example
color
The color of the button.

@default

'default'

Show example
loading
Whether the button or link is in a loading state.
Show example
disabled
Whether the button or link is disabled.
Show example

SlotsΒΆ

#default
Show example