ActionIcon

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

import { ActionIcon } from "rizzui";

Default

The default style of ActionIcon component.

import { ActionIcon } from "rizzui";

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

Variants

You can change the style of the ActionIcon using variant property.

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>
    </>
  );
}

Sizes

You can change the size of the ActionIcon using size property.

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>
    </>
  );
}

Rounded

You can change the border radius of the ActionIcon using rounded property.

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>
    </>
  );
}

Colors

You can change the color of the ActionIcon using color property.

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>
    </>
  );
}

Loading

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

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>
    </>
  );
}

Disabled

The disabled style of the ActionIcon component.

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>
  );
}

API Reference

---

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.

Props	Type	Description	Default
as	button or span	Render as	"button"
children	React.ReactNode	Use any SVG icon	__
type	ActionIconButtonTypes	Set the original HTML type of button	"button"
variant	ActionIconVariants	Set the ActionIcon variants	"solid"
size	ActionIconSizes	Set the size of the component. "sm" is equivalent to the dense ActionIcon styling.	"md"
rounded	ActionIconRounded	Set border radius of the ActionIcon component	"md"
color	ActionIconColors	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 ...	__

Action Icon Button Types

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

ActionIcon Variants

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

ActionIcon Sizes

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

ActionIcon Rounded

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

ActionIcon Colors

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