ActionIcon
Import
import { VKActionIcon } from "@vivakits/react-components";Variant
The ActionIcon component comes with 3 different variants that you can change using the variant prop.
Size
The ActionIcon component comes with 7 different sizes that you can change using the size prop.
Color
The ActionIcon component comes with 5 different colors that you can change using the color prop. It has both solid and outline variants.
Rounded
The shape of the ActionIcon component can be changed using rounded prop
Gradient
The gradient color of the ActionIcon component can be changed using gradient prop
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| icon | ReactNode | Displays ActionIcon content | - |
| variant | solidoutlinelight | Changes ActionIcon appreance | solid |
| color | primarysecondaryaccentsuccesswarningdanger | Changes ActionIcon color | primary |
| size | defaultxssmmdlgxl2xl | Changes ActionIcon size | md |
| rounded | defaultnonexssmmdlgfull | Changes border radius of the ActionIcon | default |
| gradient | Takes an object with properties: from, to and deg | Creates a linear gradient background for the ActionIcon | - |
| loading | boolean | Whether the ActionIcon is loading | false |