Skip to main content

Icon Button

Buttons are clickable elements used for performing interface actions. When space is limited, an icon button may be used.

note

Buttons are not links and should not be used for navigation. Buttons do something, links go somewhere. When you want to navigate a user to another page or website, use a link.

Appearance​

Primary​

Use a primary button variant to indicate the strongest call to action on a page. Primary buttons should appear only once per section. Not every page needs a primary button.

http://localhost:3000
<IconButton variant="primary">
  <Add />
</IconButton>

Secondary​

The secondary button should be the default button variant for most use cases.

http://localhost:3000
<IconButton variant="secondary">
  <Add />
</IconButton>

Tertiary​

Use a tertiary button to deprioritize actions when placed next to secondary or primary buttons. Tertiary buttons may also be used to lessen visual distraction when a multitude of similar actions are being used, or when the button exists inside an element with little spacing.

For example, a table that includes a download button in each row should use the tertiary variant.

http://localhost:3000
<IconButton variant="tertiary">
  <Download />
</IconButton>

Danger​

The danger variant is used to indicate an action that is destructive and cannot be undone.

http://localhost:3000
<IconButton variant="danger">
  <TrashCan />
</IconButton>

Brand​

Use a brand button variant for project44 specific marketing moments. This should be used sparingly.

http://localhost:3000
<IconButton variant="brand">
  <Add />
</IconButton>

States​

Disabled​

Use the isDisabled prop to disable a button that isn’t usable. Disabled buttons present a number of accessibility issues, particularly in forms, so they should be used sparingly.

http://localhost:3000
<IconButton isDisabled>
  <Add />
</IconButton>

Sizing​

Small​

Set the button size to small when vertical spacing is limited, like inside a table row.

http://localhost:3000
<IconButton variant="secondary" size="small">
  <Add />
</IconButton>

Common configurations​

Some icons have meanings that are understood universally across software experiences. For example, a trash can always conveys delete, where a plus symbol says add.

When this is true, a designer should feel empowered to rely solely on the button's icon to convey meaning.

http://localhost:3000
<ButtonGroup>
    <IconButton>
        <Add />
    </IconButton>
    
    <IconButton variant="secondary">
        <Download />
    </IconButton>
    
    <IconButton variant="secondary">
        <More />
    </IconButton>
    
    <IconButton variant="danger">
        <TrashCan />
    </IconButton>
    
    <IconButton variant="tertiary">
        <Close />
    </IconButton>
</ButtonGroup>

Overflow menu​

Overflow menus give users a place to find additional relevant actions that are deprioritized enough to obscure under a dropdown menu.

Use the More icon to indicate an overflow menu. When space is limited or multiple overflow menus exist in one section (like a table, for example), use the small size and tertiary variant.

http://localhost:3000
<IconButton variant="tertiary" size="small">
  <More />
</IconButton>

Multiple icons​

The icon button actually supports multiple icons, though there is often little point to that except for instances where we want an icon button to convey a dropdown action.

In this example, we add a ChevronDown icon to imply you can choose from a variety of download options.

note

If you want to combine a promoted action with alternative actions, use a Button Group.

http://localhost:3000
<IconButton variant="secondary">
    <Download />
    <ChevronDown />
</IconButton>

Props​

as?The root element to be rendered