Skip to content
Telescope

Icon buttonNew: New

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.

Skeleton

The skeleton property is used to display a loading state for the component while data is being fetched. It provides a visual placeholder, giving users a preview of the UI structure before the actual content is loaded. This enhances the user experience by offering a more accurate representation of the final layout during data retrieval.

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.