Icon button

import { IconButton } from '@raystack/apsara';
import { Cross2Icon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <IconButton aria-label="Close">
      <Cross2Icon />
    </IconButton>
  );
}

import { IconButton } from '@raystack/apsara';
import { PlusIcon } from '@radix-ui/react-icons';

<IconButton size={1} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton size={2} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton size={3} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton size={4} aria-label="Add">
  <PlusIcon />
</IconButton>

<IconButton disabled aria-label="Disabled action">
  <PlusIcon />
</IconButton>

import { IconButton } from '@raystack/apsara';
import { TrashIcon } from '@radix-ui/react-icons';

export default function Example() {
  const handleDelete = () => {
    console.log('Delete clicked');
  };

  return (
    <IconButton onClick={handleDelete} aria-label="Delete item">
      <TrashIcon />
    </IconButton>
  );
}