---
sidebar_position: 1
---

import { ActionIcon, Button } from "rizzui";
import {
  BellIcon,
  BoltIcon,
  HeartIcon,
  HandThumbUpIcon,
  ChatBubbleOvalLeftIcon,
  AdjustmentsHorizontalIcon,
} from "@heroicons/react/24/outline";
import Paper from "@site/src/components/paper";

# ActionIcon

Primary action icon button to trigger an operation. It's a simple button that contains no text but only icon.

```tsx
import { ActionIcon } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **ActionIcon** component.

<Paper>
  <ActionIcon>
    <AdjustmentsHorizontalIcon className="w-5 h-5" />
  </ActionIcon>
</Paper>

```tsx
import { ActionIcon } from "rizzui";

export default function App() {
  return (
    <ActionIcon>
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
  );
}
```

<div className="mb-16" />

## Variants

You can change the style of the **ActionIcon** using [**variant**](#actionicon-variants) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <ActionIcon variant="text">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon variant="outline">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon variant="flat">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon variant="solid">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
  </div>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon variant="text">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon variant="outline">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon variant="flat">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon variant="solid">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of the **ActionIcon** using [**size**](#actionicon-sizes) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <ActionIcon size="sm">
      <AdjustmentsHorizontalIcon className="w-4 h-4" />
    </ActionIcon>
    <ActionIcon>
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon size="lg">
      <AdjustmentsHorizontalIcon className="w-6 h-6" />
    </ActionIcon>
    <ActionIcon size="xl">
      <AdjustmentsHorizontalIcon className="w-7 h-7" />
    </ActionIcon>
  </div>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon size="sm">
        <AdjustmentsHorizontalIcon className="w-4 h-4" />
      </ActionIcon>
      <ActionIcon>
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon size="lg">
        <AdjustmentsHorizontalIcon className="w-6 h-6" />
      </ActionIcon>
      <ActionIcon size="xl">
        <AdjustmentsHorizontalIcon className="w-7 h-7" />
      </ActionIcon>
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of the **ActionIcon** using [**rounded**](#actionicon-rounded) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <ActionIcon rounded="none">
      <BoltIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon rounded="sm">
      <HandThumbUpIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon>
      <HeartIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon rounded="lg">
      <ChatBubbleOvalLeftIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon rounded="full">
      <BellIcon className="w-5 h-5" />
    </ActionIcon>
  </div>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import {
  BellIcon,
  BoltIcon,
  HeartIcon,
  HandThumbUpIcon,
  ChatBubbleOvalLeftIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon rounded="none">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="sm">
        <HandThumbUpIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon>
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="lg">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon rounded="full">
        <BoltIcon className="w-5 h-5" />
      </ActionIcon>
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of the **ActionIcon** using [**color**](#actionicon-colors) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap mb-10">
    <ActionIcon>
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon color="secondary">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon color="danger">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
  </div>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon>
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon color="secondary">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon color="danger">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
    </>
  );
}
```

<div className="mb-16" />

## Loading

You can set the loading state of the **ActionIcon** button using **isLoading** property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <ActionIcon isLoading={true}>Primary</ActionIcon>
    <ActionIcon isLoading={true} color="secondary">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
    <ActionIcon isLoading={true} color="danger">
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
  </div>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <>
      <ActionIcon isLoading={true} color="primary">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon isLoading={true} color="secondary">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
      <ActionIcon isLoading={true} color="danger">
        <AdjustmentsHorizontalIcon className="w-5 h-5" />
      </ActionIcon>
    </>
  );
}
```

<div className="mb-16" />

## Disabled

The disabled style of the **ActionIcon** component.

<Paper>
  <ActionIcon disabled={true}>
    <AdjustmentsHorizontalIcon className="w-5 h-5" />
  </ActionIcon>
</Paper>

```tsx
import { ActionIcon } from "rizzui";
import { AdjustmentsHorizontalIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <ActionIcon disabled={true}>
      <AdjustmentsHorizontalIcon className="w-5 h-5" />
    </ActionIcon>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### ActionIcon Props

Here is the API documentation of the ActionIcon component. And the rest of the props are the same as the original html button. You can use props like **id**, **title**, **onClick**, **onFocus**, **onBlur** etc.

<div className="overflow-x-auto">

|   Props   |                        Type                        |                                         Description                                         |   Default   |
| :-------: | :------------------------------------------------: | :-----------------------------------------------------------------------------------------: | :---------: |
|    as     |                 `button` or `span`                 |                                          Render as                                          | `"button"`  |
| children  |                 `React.ReactNode`                  |                                      Use any SVG icon                                       |    \_\_     |
|   type    | [ActionIconButtonTypes](#action-icon-button-types) |                            Set the original HTML type of button                             | `"button"`  |
|  variant  |     [ActionIconVariants](#actionicon-variants)     |                                 Set the ActionIcon variants                                 |  `"solid"`  |
|   size    |        [ActionIconSizes](#actionicon-sizes)        | Set the size of the component. <br /> `"sm"` is equivalent to the dense ActionIcon styling. |   `"md"`    |
|  rounded  |      [ActionIconRounded](#actionicon-rounded)      |                        Set border radius of the ActionIcon component                        |   `"md"`    |
|   color   |       [ActionIconColors](#actionicon-colors)       |                                   Change ActionIcon color                                   | `"primary"` |
| isLoading |                     `boolean`                      |                            Set the loading status of ActionIcon                             |    \_\_     |
| disabled  |                     `boolean`                      |                              Disabled state of the ActionIcon                               |    \_\_     |
| className |                      `string`                      |                             Add custom classes for extra style                              |    \_\_     |
|    ref    |              `Ref<HTMLButtonElement>`              |                                         forwardRef                                          |    \_\_     |
|    ...    |     `ButtonHTMLAttributes` or `HTMLAttributes`     |                native props like **onClick**, **title**, **aria-label** ...                 |    \_\_     |

</div>

<div className="mb-10" />

### Action Icon Button Types

```ts
type ActionIconButtonTypes = "button" | "submit" | "reset";
```

<div className="mb-10" />

### ActionIcon Variants

```ts
type ActionIconVariants = "solid" | "flat" | "outline" | "text";
```

<div className="mb-10" />

### ActionIcon Sizes

```ts
type ActionIconSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### ActionIcon Rounded

```ts
type ActionIconRounded = "sm" | "md" | "lg" | "none" | "full";
```

<div className="mb-10" />

### ActionIcon Colors

```ts
type ActionIconColors = "primary" | "secondary" | "danger";
```
