Icon Button Overview

---

Description

Pando’s <IconButton /> is an interactive element that performs an action when activated. It should only contain an icon and is meant to be used only when space is limited. For a button with text, see the

<IconButton /> has custom props as well as access to all native <button /> attributes. for more information on the native <button /> element including attributes and behavior

Examples: Sending an email, linking to a common social media site in a header, or deleting an item in a list

When to use

Buttons are meant to be used to perform an action. Unless it is to move between steps of a multi-page action, avoid using <IconButton /> for navigation purposes. Instead, use the .

Button Anatomy

• Button
• Icon

Import

import { IconButton } from '@pluralsight/react'

Variations

Props

Default:

{
  ariaLabel: null,
  shape: 'square',
  palette: 'action',
  usage: 'filled',
  size: 'lg',
}

All options:

Note: those denoted with ? are optional

{
  ariaLabel: string,
  shape?: 'square' | 'circle'
  palette?: 'action' | 'neutral' | 'danger',
  usage?: 'filled' | 'text',
  size?: 'lg' | 'md' | 'sm' | 'xs',
}