IconButton

IconButton

The IconButton component provides a compact button for actions that can be represented by an icon. It is useful for common actions such as closing, editing, deleting, or opening additional options.

import IconButton from "rocksolidjs/IconButton";
import DownloadIcon from "@/icons/download";

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

Examples

Colors

Use the color prop to communicate the semantic meaning of an action.

import IconButton from "rocksolidjs/IconButton";
import DownloadIcon from "@/icons/download";

export default function Example() {
  return (
    <div class="flex items-center gap-4">
      <IconButton color="default" aria-label="Download">
        <DownloadIcon />
      </IconButton>
      <IconButton color="success" aria-label="Download">
        <DownloadIcon />
      </IconButton>
      <IconButton color="warning" aria-label="Download">
        <DownloadIcon />
      </IconButton>
      <IconButton color="info" aria-label="Download">
        <DownloadIcon />
      </IconButton>
      <IconButton color="error" aria-label="Download">
        <DownloadIcon />
      </IconButton>
    </div>
  );
}

Sizes

Use the size prop to control the size of the IconButton.

import IconButton from "rocksolidjs/IconButton";
import DownloadIcon from "@/icons/download";

export default function Example() {
  return (
    <div class="flex items-center gap-4">
      <IconButton size="small" aria-label="Download">
        <DownloadIcon />
      </IconButton>
      <IconButton size="medium" aria-label="Download">
        <DownloadIcon />
      </IconButton>
      <IconButton size="large" aria-label="Download">
        <DownloadIcon />
      </IconButton>
    </div>
  );
}

Disabled

Use the disabled prop to prevent an action from being triggered.

import IconButton from "rocksolidjs/IconButton";
import DownloadIcon from "@/icons/download";

export default function Example() {
  return (
    <IconButton disabled aria-label="Download">
      <DownloadIcon />
    </IconButton>
  );
}

Accessibility

  • Provide an accessible label for every IconButton.
  • Use a concise action-oriented label such as Close, Edit, or Delete.
  • Do not rely on the icon alone to communicate the button’s purpose.
  • Use disabled when the action is temporarily unavailable.
  • Ensure the button has sufficient contrast and a visible focus state.

API

IconButton

The IconButton component accepts an icon as its content and supports different sizes, disabled state, and custom CSS classes.

Prop Type Required Default Description
children JSXElement Yes — The icon or SVG displayed inside the button.
class string No — Additional CSS classes applied to the IconButton.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color of the IconButton.
disabled boolean No false Disables the IconButton and prevents user interaction.
size "small" | "medium" | "large" No "medium" Controls the size of the IconButton.
  • Button — Use Button when an action needs visible text.