IconButton

IconButton's are used when you need an icon to trigger an action, such as showing a dialog or deleting an item. It require a label that describes it's action. The label should be descriptive and succinct. If you need an icon for purely decorative purposes use an <Icon /> instead.

IconButton Options

Sizes

  • xxsmall | xsmall (default) | small | medium | large

States

Shapes

  • round | square (default)

Color

  • critical | neutral (default) | key

Animation

Create the styled rules desired and wrap the IconButton component on it.

IconButton & Tooltip

You can also use your own Tooltip around IconButton (this will effectively remove the "built-in" Tooltip)

Disabling the Tooltip

If you would like to disable the tooltip entirely, use the tooltipDisabled prop.