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.

Omiting the Tooltip

If the icon within a button is widely recognised and clearly conveys the associated action (e.g., a "close" icon in a Modal component), it is acceptable to omit the tooltip.

Information:

See the Accessibility section for details

Please refer to the WCAG guidelines for more information on when this is sufficient.

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.

Accessibility

By default, the aria-label is automatically generated from the content prop in tooltipProps, but only when the content is a string. If the generated label isn't descriptive enough, if the content is not suitable for screen readers, or if dangerouslyOmitTooltip is enabled, you should manually provide an aria-label for accessibility.

When the button is hovered or focused, the aria-label is removed, and an aria-describedby attribute is added, pointing to the element containing the tooltip's content. This ensures assistive technologies announce only the aria-describedby content, avoiding duplicate announcements.

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.