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.

For design guidelines and all interactive states, see the Buttons design page.

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

childrenReact.ReactNode

The icon to render, typically a Cherry Icon. It is sized automatically per $size (12px, 14px, or 16px).

aria-labelstringrequired

Accessible label describing the action. Required because the button has no visible text.

type"button" | "submit" | "reset"

Defaults to "button" (instead of the native "submit") so the button does not accidentally submit a surrounding form. Pass type="submit" to override.

$size"default" | "big" | "small"

Size of the button: 24px (small), 28px (default), or 32px (big).

$errorboolean

Renders the button in the theme's error color for destructive actions.

$activeboolean

Marks the button as being in an "on" state: primary border, tinted background, and primary icon color. When set (true or false), the value is also reflected as aria-pressed so screen readers announce the toggle state. The active styling is ignored while disabled, but aria-pressed is still emitted.

iconButtonStyles

The css helper behind the component is also exported as iconButtonStyles(theme, $size, $error, disabled, $active). Use it to apply the exact IconButton look to a custom styled component:

import styled from "styled-components";
import { iconButtonStyles } from "cherry-styled-components";

const RoundLink = styled.a`
  ${({ theme }) => iconButtonStyles(theme, "big")};
`;

View Source