IconButton Component Playground

Interactive playground to test all IconButton props and variants

Props

Variant

Color

Color selection is only available for Primary variant

Size

Button Text

Text displayed on the button

Full Width

Icon Only

Disabled

Icon Selection

Leading Icon

Trailing Icon

Icon Visibility

Show Leading Icon

Show Trailing Icon

Toggle icon visibility. When unchecked, icons are hidden.

Preview

Code

<IconButton variant="primary" size="large" fullWidth={false} iconOnly={false} isLoading={false} disabled={false} showLeadingIcon={false} showTrailingIcon={false} color="primary">{"Button"}</IconButton>

Props (JSON)

{
  "variant": "primary",
  "size": "large",
  "fullWidth": false,
  "iconOnly": false,
  "isLoading": false,
  "disabled": false,
  "showLeadingIcon": false,
  "showTrailingIcon": false,
  "color": "primary",
  "children": "Button"
}