ActionIcon

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

CLI Usage

pnpm dlx @somaui/cli add action-icon

generates components/action-icon :

import React from 'react';
import { tv, type VariantProps } from 'tailwind-variants';
import { SpinnerIcon } from '@/icons/spinner';

const actionIcon = tv({
  base: 'inline-flex items-center cursor-pointer justify-center active:enabled:translate-y-px focus:outline-none focus-visible:ring-[1.8px] focus-visible:ring-offset-2 ring-offset-background transition-colors duration-200 rounded-[var(--border-radius)] border-[length:var(--border-width)]',
  variants: {
    variant: {
      solid:
        'bg-primary-dark hover:bg-primary-dark dark:hover:bg-primary/90 focus-visible:ring-border text-primary-foreground border-transparent dark:backdrop-blur',
      outline:
        'bg-transparent border-border hover:border-primary focus-visible:ring-border hover:text-primary dark:backdrop-blur',
      flat: 'bg-muted hover:bg-primary-lighter focus-visible:ring-primary-lighter hover:text-primary-dark border-transparent backdrop-blur',
      text: 'hover:text-primary focus-visible:ring-primary-lighter border-transparent',
      danger:
        'bg-red hover:bg-red-dark dark:hover:bg-red/80 focus-visible:ring-red/30 text-white border-transparent dark:backdrop-blur',
    },
    size: {
      sm: 'p-0.5 size-8',
      md: 'p-1 size-10',
      lg: 'p-2 size-12',
    },
    disabled: {
      true: 'dark:hover:bg-muted/70 cursor-not-allowed border-muted bg-muted/70 text-muted-foreground hover:text-muted-foreground backdrop-blur-xl hover:border-muted hover:bg-muted/70',
    },
    isLoading: {
      true: 'pointer-events-none relative',
    },
  },
  defaultVariants: {
    variant: 'solid',
    size: 'md',
  },
});

const spinnerStyles = tv({
  base: 'animate-spin',
  variants: {
    size: {
      sm: 'size-4',
      md: 'size-[18px]',
      lg: 'w-5 h-5',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

export type ActionIconProps = Omit<
  VariantProps<typeof actionIcon>,
  'disabled' | 'isLoading'
> &
  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> &
  React.HTMLAttributes<HTMLSpanElement> & {
    as?: 'button' | 'span';
    type?: 'button' | 'submit' | 'reset';
    children: React.ReactNode;
    isLoading?: boolean;
    disabled?: boolean;
    ref?: React.Ref<HTMLButtonElement>;
  };

export function ActionIcon({
  as = 'button',
  type = 'button',
  children,
  className,
  isLoading,
  variant,
  size,
  disabled,
  ref,
  ...actionIconProps
}: ActionIconProps) {
  const Component = as;

  return (
    <Component
      ref={ref}
      disabled={disabled}
      className={actionIcon({
        variant,
        size,
        disabled,
        isLoading,
        className,
      })}
      {...(as && as !== 'span' && { type })}
      {...actionIconProps}
    >
      {isLoading ? (
        <SpinnerIcon className={spinnerStyles({ size })} />
      ) : (
        <>{children}</>
      )}
    </Component>
  );
}

As a package

import { ActionIcon } from '@somaui/ui/action-icon';

Default

The default style of ActionIcon component.

import { ActionIcon } from '@somaui/ui/action-icon';

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

Variants

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

import { ActionIcon } from '@somaui/ui/action-icon';
import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline';

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

Sizes

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

import { ActionIcon } from '@somaui/ui/action-icon';
import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline';

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

Loading

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

import { ActionIcon } from '@somaui/ui/action-icon';
import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline';

export default function App() {
  return (
    <>
      <ActionIcon isLoading={true} variant="solid">
        <AdjustmentsHorizontalIcon className="size-5" />
      </ActionIcon>
      <ActionIcon isLoading={true} variant="outline">
        <AdjustmentsHorizontalIcon className="size-5" />
      </ActionIcon>
      <ActionIcon isLoading={true} variant="flat">
        <AdjustmentsHorizontalIcon className="size-5" />
      </ActionIcon>
      <ActionIcon isLoading={true} variant="danger">
        <AdjustmentsHorizontalIcon className="size-5" />
      </ActionIcon>
    </>
  );
}

Disabled

The disabled style of the ActionIcon component.

import { ActionIcon } from '@somaui/ui/action-icon';
import { AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline';

export default function App() {
  return (
    <ActionIcon disabled={true}>
      <AdjustmentsHorizontalIcon className="size-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"
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';

ActionIcon Colors

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