Documentation
Documentation Hub

Rounded:full

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radius of the box. You can also use the size prop to change the size of the box.

Show code
vue

Rounded:lg

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radius of the box. You can also use the size prop to change the size of the box.

Show code
vue

Rounded:md

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radius of the box. You can also use the size prop to change the size of the box.

Show code
vue

Rounded:sm

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radius of the box. You can also use the size prop to change the size of the box.

Show code
vue

Rounded:none

Icon boxes can have different sizes and radius factors. Use the rounded prop to change the radius of the box. You can also use the size prop to change the size of the box.

Show code
vue

Variant:solid

Icon boxes can have different colors. Use the variant and the color props to change the color and style of the box.

Show code
vue

Variant:custom

Icon boxes can have different colors. Use the none color combined with Tailwind CSS utility classes to create your own solid colors.

Show code
vue

Variant:pastel

Icon boxes can have different colors. Use the variant and the color props to change the color and style of the box.

Show code
vue

Variant:custom

Icon boxes can have different colors. Use the none color combined with Tailwind CSS utility classes to create your own pastel colors.

Show code
vue

Variant:outline

Icon boxes can have different colors. Use the variant and the color props to change the color and style of the box.

Show code
vue

Variant:custom

Icon boxes can have different colors. Use the none color combined with Tailwind CSS utility classes to create your own outline colors.

Show code
vue

Masks

Icon boxes can be displayed using SVG masks, bringing fancier shapes to your UI. Keep in mind that the mask prop is only available for the none radius.

Using svg masks will hide any overflow from your Icon box, making it unable to properly display tooltips or other attached content.
Show code
vue

Shadows

Icon boxes can have custom color shadows. Use the none color combined with Tailwind CSS utility classes to create your own shadow colors.

Show code
vue

#<BaseIconBox>

•Properties

bordered
Whether the icon is bordered.
Show example
vue
mask
Applies an svg mask from the available presets. (needs rounded to be set to `none`).
Show example
vue

•Properties (with app.config)

color
The color of the box.
Show example
vue
rounded
The radius of the icon.

@since

2.0.0

Show example
vue
size
The size of the icon.
Show example
vue
variant
The variant of the box.

@since

2.0.0

Show example
vue

•Slots

#default
This slot has no inherted props
Show example
vue

•Exposed

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