IconButton

The IconButton component is a circular, icon-only button for compact actions like edit, delete, or settings.

Keep in mind that the <button> element inherently includes native browser properties like onClick. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props.

Because the button has no visible text, the aria-label property is required.

import React from "react";
import { Icon, IconButton } from "cherry-styled-components";

export default function Page() {
  return (
    <IconButton aria-label="Settings">
      <Icon name="Settings" />
    </IconButton>
  );
}

With sizes:

<IconButton $size="small" aria-label="Edit">
  <Icon name="Pencil" />
</IconButton>
<IconButton $size="big" aria-label="Add">
  <Icon name="Plus" />
</IconButton>

For destructive actions, use the error variant:

<IconButton $error aria-label="Delete">
  <Icon name="Trash2" />
</IconButton>

For toggle-like actions that stay "on" (a dropzone that is open, a preview that is active), use $active. The button keeps its primary border with a subtle tint, and the state is exposed to assistive technology via aria-pressed automatically:

<IconButton $active={isPreviewOpen} aria-label="Toggle preview">
  <Icon name="Eye" />
</IconButton>

Properties