sp-close-button

NPM 1.9.0

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 active active boolean false disabled disabled boolean false Disable this control. It will not receive focus or events download download string | undefined Causes the browser to treat the linked URL as a download. href href string | undefined The URL that the hyperlink points to. label label string | undefined An accessible label that describes the component. It will be applied to aria-label, but not visually rendered. referrerpolicy referrerpolicy | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined How much of the referrer to send when following the link. rel rel string | undefined The relationship of the linked URL as space-separated link types. staticColor static-color 'black' | 'white' | undefined tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property target target '_blank' | '_parent' | '_self' | '_top' | undefined Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>). type type 'button' | 'submit' | 'reset' 'button' The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`. variant variant ButtonStaticColors | '' '' The visual variant to apply to this button.

Slots

Name Description default slot text label of the Close Button icon icon element(s) to display at the start of the button

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)