sp-close-button

Deprecation Warning
The link API features (href, target, download, referrerpolicy, rel) in @spectrum-web-components/button are deprecated and will be removed in a future release. Use a native HTML anchor element with the spectrum-Button class and @spectrum-web-components/styles/global-elements.css instead.

NPM 1.12.2

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

An <sp-close-button> is a special extension of the ButtonBase class that includes icons and styling for buttons used to close a modal or dialog.

Usage

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/button

Import the side effectful registration of <sp-close-button> as follows:

import '@spectrum-web-components/button/sp-clear-button.js';

When looking to leverage the CloseButton base class as a type and/or for extension purposes, do so via:

import { ClearButton } from '@spectrum-web-components/button';

Anatomy

The close button is a button with only close icon.

<sp-close-button>Close Dialog</sp-close-button>

Label

The label for an <sp-close-button> element can be set via it's default slot or with the label attribute. With either method, the label will not be visible but still read by screenreaders.

Default slot 
<sp-close-button>Close</sp-close-button>
 Label attribute 
<sp-close-button label="Close"></sp-close-button>

Options

Sizes

Small 
<sp-close-button size="s">Small</sp-close-button>
 Medium 
<sp-close-button size="m">Medium</sp-close-button>
 Large 
<sp-close-button size="l">Large</sp-close-button>
 Extra Large 
<sp-close-button size="xl">Extra Large</sp-close-button>

States

In addition to the variant, the <sp-close-button> element supports a disabled state, which can be applied by adding the attribute disabled.

Disabled

While disabled, the <sp-close-button> element will not respond to click events and will appear faded.

<sp-button-group>
  <sp-close-button>Normal</sp-close-button>
  <sp-close-button disabled>Disabled</sp-close-button>
</sp-button-group>

Behaviors

Handling events

Events handlers for clicks and other user actions can be registered on a <sp-close-button> as one would on a standard HTML <button> element.

<sp-close-button onclick="spAlert(this, '<sp-close-button> clicked!')">
  Click me
</sp-close-button>

Autofocus

The autofocus attribute sets focus on the <sp-close-button> when the component mounts. This is useful for setting focus to a specific sp-close-button when a popover or dialog opens.

<sp-button id="trigger">Open</sp-button>
<sp-overlay trigger="trigger@click" placement="bottom">
  <sp-popover>
    <!-- Button will autofocus when open -->
    <sp-close-button autofocus>Close</sp-close-button>
  </sp-popover>
</sp-overlay>

Accessibility

Include a label

A button is required to have either text in the default slot or a label attribute on the <sp-close-button>.

Attributes and Properties

Property Attribute Type Default Description accessibleLabel accessible-label string | undefined Accessible label forwarded to the internal ` disabled disabled boolean false Whether the button is disabled. Removes focusability and prevents interaction. pending pending boolean false Whether the button is in a pending (busy) state. The button remains focusable but activation is suppressed. pendingLabel pending-label string | undefined Custom accessible label used during the pending state. When omitted, the pending label is derived from the resolved non-busy accessible name plus a busy suffix (e.g. "Save, busy"). staticColor static-color 'black' | 'white' | undefined variant variant ButtonStaticColors | '' '' The visual variant to apply to this button.

Slots

Name Description default slot text label of the Close Button

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.12.2

1.12.1

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.12.1

1.12.0

Patch Changes

  • Updated dependencies [ba14a2b, dc6a8e8, f37dec6]:
    • @spectrum-web-components/base@1.12.0

1.11.2

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.11.2

1.11.1

Patch Changes

  • Updated dependencies [95e1c25]:
    • @spectrum-web-components/base@1.11.1

1.11.0

Minor Changes

  • #5881 50ad026 Thanks @cdransf! - Added visually hidden default slot rendering to sp-close-button so text content is accessible to screen readers while remaining invisible to sighted users.

Patch Changes

  • Updated dependencies [9cb816b]:
    • @spectrum-web-components/base@1.11.0

1.10.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.10.0

1.9.1

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.9.1

1.9.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.9.0

1.8.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.8.0

1.7.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.7.0

1.6.0

Patch Changes

  • #5349 a9727d2 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/close-button

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/close-button

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/close-button

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/close-button

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/close-button

0.49.0 (2024-10-15)

Features

  • add static-color to replace static (#4808) (43cf086)

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/close-button

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/close-button

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/close-button

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/close-button

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/close-button

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/close-button

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/close-button

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/close-button

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/close-button

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/close-button

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/close-button

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/close-button

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/close-button

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/close-button

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/close-button

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/close-button

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/close-button

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/close-button

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/close-button

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/close-button

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/close-button

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/close-button

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/close-button

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/close-button

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/close-button

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/close-button

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/close-button

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/close-button

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/close-button

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/close-button

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/close-button

0.35.0 (2023-07-31)

Features

  • action-bar: use core tokens (4e21edf)

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/close-button

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/close-button

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/close-button

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/close-button

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/close-button

0.30.0 (2023-05-03)

Bug Fixes

  • prevent default hoisting of custom pseudo elements (7f66346)

Features

  • close-button: add Close Button pattern (8e9e1ad)
  • close-button: use core tokens (e6a4efe)
  • include all Dev Mode files in side effects (f70817c)

0.3.12 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.11 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.10 (2023-03-22)

Bug Fixes

  • prevent default hoisting of custom pseudo elements (7f66346)

0.3.9 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.8 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.7 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.6 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.5 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.4 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.3 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/close-button

0.3.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.2.0 (2022-08-04)

Features

  • close-button: use core tokens (e6a4efe)

0.1.7 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.6 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.5 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.4 (2022-05-27)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.3 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.2 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.1 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/close-button

0.1.0 (2022-03-04)

Features

  • close-button: add Close Button pattern (8e9e1ad)