Skip to content
Telescope

Icon buttonNew

Enables users to control the visibility of other UI elements.

Features

  • Comes in three visually different variants.
  • Supports three sizes.
  • Has a required Tooltip to ensure clarity around the button's function.

When to use

At Pleo, we use Icon Buttons for actions that affect the visibility of other UI elements. Examples include closing a side panel, navigating between items in a side panel, and toggling the visiblity of filter controls. For more definitive actions, such as creating, editing, or deleting content, we prefer our regular Button component.

Examples

Variants

Primary

Use for important actions that affect the visibility of other UI elements.

Secondary

Use for actions of regular importance that affect the visibility of other UI elements.

Quiet

Use for less important actions that affect the visibility of other UI elements.

Sizes

The component supports four sizes.

Icon

Use the Icon prop to specify which of our icons to show in the button.

Tooltip

The component comes with a required Tooltip to ensure clarity around the button's function. See the Tooltip component's API for details.

Disabled

Pass the disabled prop to disable all interactions with the button.

Related components

  • Button: A clickable element which communicates that users can trigger an action.
  • Button group: A layout component used to group multiple related actions a user can take.