Close

Overview
Specs
Guidelines

Component

The Close Button is a fundamental UI element used to dismiss or close a specific component, modal, or notification within an interface.

It typically consists of a small icon or symbol, such as an X, positioned in the corner of the component. The Close Button provides users with a clear and intuitive way to exit or dismiss content or interactions, enhancing usability and user experience.

A: Close Component

1: Hover Background

2: Icon

Used for:

Modals

When presenting a modal, the user must be able to dismiss it. This can be reached either by clicking outside the modal area or by using the Close Button;

Tabs

When using the Removable variation of tabs, the Close Button is displayed to remove/dismiss the tab item;

Text-fields

In this context, the Close Button is used for clearing the introduced data in the Focus state;

Flyouts

As is the case with modals, Close Buttons are used to dismiss the flyout as a complementary access, by using the keyboard, for example;

Drafts

In order to remove drafts, the Close Button can be used as it isn’t a critical action inside the user flow.

Don’t use for:

Replacing delete buttons

A Close Button is only for dismissing or closing its parent component, not for taking a destructive action. In this situation, consider using a button;

Non-dismissible components

In views or areas where the focus is important, consider not using the Close Button;

Guided processes

In interfaces guiding users through a step-by-step process or tutorial, Close Buttons may undermine the guided experience by allowing users to skip ahead or exit prematurely;

Error prevention

In interfaces where closing a component could result in data loss or unintended actions, such as in form submissions or document editing applications, omitting Close Buttons can help prevent user errors.