# IconButton
> Cherry IconButton component - a circular icon-only button with three sizes, an error variant, and an active toggle state.
Source: https://cherry.al/code/icon-button
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# IconButton
The IconButton component is a circular, icon-only button for compact actions like edit, delete, or settings.
Keep in mind that the `` 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](/buttons) design page.
```jsx
import React from "react";
import { Icon, IconButton } from "cherry-styled-components";
export default function Page() {
return (
);
}
```
With sizes:
```html
```
For destructive actions, use the error variant:
```html
```
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:
```html
```
## Properties
The icon to render, typically a Cherry `Icon`. It is sized automatically per
`$size` (12px, 14px, or 16px).
Accessible label describing the action. Required because the button has no
visible text.
Defaults to `"button"` (instead of the native `"submit"`) so the button does
not accidentally submit a surrounding form. Pass `type="submit"` to override.
Size of the button: 24px (small), 28px (default), or 32px (big).
Renders the button in the theme's error color for destructive actions.
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:
```tsx
import styled from "styled-components";
import { iconButtonStyles } from "cherry-styled-components";
const RoundLink = styled.a`
${({ theme }) => iconButtonStyles(theme, "big")};
`;
```
View Source