Skip to content
Telescope

Button

A clickable element which communicates that users can trigger an action.

Features

  • Supports loading and disabled states.
  • Can display an icon next to the text of the button.
  • Exposes a "naked" version for custom use cases.

When to use

At Pleo, we use buttons when users need to trigger actions or events such as submitting a form, opening a modal, cancelling an action, performing a delete operation, or similar.

Examples

Variants

The variant prop can be used to change the appearance of the component.

Loading

Pass the loading prop to show a loading animation and make the button disabled. The loading state hides the content but keeps the buttons original width.

Information:

The loading state should be used after a submit button is clicked, to prevent a form from being submitted again and to show the status to the user.

Pass the loadingText prop to provide a loading text next to the loading icon. loadingText should be used when you wait for a potential long lived process.

Disabled

We try to avoid disabled buttons as there are many usability pitfalls to using them. If you really need to use a disabled button for some reason, add a tooltip to explain why the button is disabled. Read more here about why.

Information:

Users should always be able to press the submit button in forms. See our forms guidelines for more details.

Destructive

Use the destructive prop to warn of actions that can be destructive or have negative consequences if taken.

Information:

destructive buttons should be used sparingly.

With icon

Use the IconLeft or IconRight props to add an icon next to the text of the button. The color of the icon and the spacing between the text and the icon will be applied out of the box.

Icons positioned to the left are used to maximise visual communication for distinctive button actions in Pleo.

Icons positioned to the right are used to maximise visual communication for navigating between views or areas of the product.

Information:

If you want to have a button with an icon only, please use our IconButton

With Tooltip

The component accepts a tooltipProps prop. See the Tooltip API for details.

Full width

Pass the fullWidth prop to make the button match the width of its parent.

Skeleton

Use a "skeleton" version of this component to display a loading state 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 group: A layout component used to group multiple related actions a user can take.
  • Icon button: Enables users to control the visibility of other UI elements.
  • Link: Text that navigates the user from one page to another.