IconButton

Icon-only button with accessible label. Same variants as Button but square aspect ratio.

Examples

Square icon button with primary styling.

Square icon button with secondary (outlined) styling.

Square icon button with ghost (no border) styling.

Square icon button signalling a destructive action.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { IconButton } from "@rokle/components";

import { IconButton } from "@rokle/components";

export function Example() {
  return <IconButton />;
}

Prop	Type	Default	Description
icon	ReactNode	-	Icon element to display.
label	string	-	Accessible label for screen readers.
variant	"primary" \| "secondary" \| "ghost" \| "destructive"	"ghost"	Visual style variant.
size	"sm" \| "md" \| "lg"	"md"	Button size.