sp-clear-button

NPM 1.10.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

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

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-clear-button> as follows:

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

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

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

Anatomy

The clear button is a button with only a close icon.

<sp-clear-button label="Reset"></sp-clear-button>

Label

An accessible label for an <sp-clear-button> must be provided using the label attribute. This sets the aria-label for screen readers. Unlike other button types, the clear button only displays an icon and does not render slot content, so the label attribute is the only way to provide an accessible name.

<sp-clear-button label="Clear"></sp-clear-button>

The label attribute is required and will be set as the aria-label on the element.

Options

Sizes

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

Quiet

The quiet attribute will render the <sp-clear-button> as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.

<sp-clear-button quiet label="Clear content"></sp-clear-button>

Static color

The static-color attribute will render the <sp-clear-button> with a static color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used variant="overBackground" attribute which is deprecated.

<sp-clear-button static-color="white" label="Clear content"></sp-clear-button>

States

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

Disabled

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

<sp-button-group>
    <sp-clear-button label="Clear">Normal</sp-clear-button>
    <sp-clear-button label="Clear" disabled>Disabled</sp-clear-button>
</sp-button-group>

Behaviors

Handling events

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

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

Autofocus

The autofocus attribute sets focus on the <sp-clear-button> when the component mounts. This is useful for setting focus to a specific sp-clear-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-clear-button label="Clear" autofocus></sp-clear-button>
    </sp-popover>
</sp-overlay>

Accessibility

Include a label

A button is required to have a label attribute on the <sp-clear-button> to provide an accessible name for screen readers. The label attribute sets the aria-label property, ensuring the button is properly announced to assistive technologies.

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 Required accessible label set as aria-label quiet quiet boolean false 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 'white' | undefined The visual variant to apply to this button. 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 'overBackground' | undefined The visual variant to apply to this button.

Slots

Name Description default slot text content to be displayed in the Button element icon icon element(s) to display at the start of the button

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

Minor Changes

  • #5320 15be17d Thanks @renovate! - Clear button styles have been updated to the latest Spectrum CSS version of the clear button. This update includes a major reduction in the number of custom property abstractions needed to support the multiple theming layers (as seen in the styles package).

    This update spans the following additional packages:

    • @spectrum-web-components/button
    • @spectrum-web-components/styles

    As the updated styles now offer additional styling options, we have added the following API to the clear button component that exists in the button package:

    • quiet - when set to true, the button will be rendered as a quiet button. This is useful for cases where you want to use the clear button in a more subtle way.
    • disabled - when set to true, the button will be rendered as a disabled button.
    • static-color - currently this only supports the white context color. This is useful for cases where the button appears on a dark background texture. This is a replacement for the previously used variant="overBackground" attribute which is deprecated.

    Deprecation

    The variant="overBackground" attribute is deprecated; please use the new static-color="white" attribute instead. When this property is used in the component, a deprecation warning will be shown in the console when in debug mode. The variant attribute will be removed in a future release.

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

  • 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/clear-button

1.1.2 (2025-02-12)

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

1.1.1 (2025-01-29)

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

1.1.0 (2025-01-29)

Bug Fixes

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

1.0.1 (2024-11-11)

Bug Fixes

  • search: clear button ui in express (#4910) (f88e1e2)

1.0.0 (2024-10-31)

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

0.49.0 (2024-10-15)

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

0.48.1 (2024-10-01)

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

0.48.0 (2024-09-17)

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

0.47.2 (2024-09-03)

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

0.47.1 (2024-08-27)

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

0.47.0 (2024-08-20)

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

0.46.0 (2024-08-08)

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

0.45.0 (2024-07-30)

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

0.44.0 (2024-07-15)

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

0.43.0 (2024-06-11)

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

0.42.5 (2024-05-24)

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

0.42.4 (2024-05-14)

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

0.42.3 (2024-05-01)

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

0.42.2 (2024-04-03)

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

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/clear-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/clear-button

0.41.1 (2024-02-22)

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

0.41.0 (2024-02-13)

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

0.40.5 (2024-02-05)

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

0.40.4 (2024-01-29)

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

0.40.3 (2024-01-11)

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

0.40.2 (2023-12-18)

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

0.40.1 (2023-12-05)

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

0.40.0 (2023-11-16)

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

0.39.4 (2023-11-02)

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

0.39.3 (2023-10-18)

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

0.39.2 (2023-10-13)

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

0.39.1 (2023-10-06)

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

0.39.0 (2023-09-25)

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

0.38.0 (2023-09-05)

Features

  • clear-button: migrate to core tokens (64be98a)

0.37.0 (2023-08-18)

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

0.36.0 (2023-08-18)

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

0.35.0 (2023-07-31)

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

0.34.0 (2023-07-11)

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

0.33.2 (2023-06-14)

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

0.33.0 (2023-06-08)

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

0.32.0 (2023-06-01)

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

0.31.0 (2023-05-17)

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

0.30.0 (2023-05-03)

Bug Fixes

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

Features

  • include all Dev Mode files in side effects (f70817c)
  • leverage latest Spectrum button API (9caf2f6)

0.2.9 (2023-04-24)

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

0.2.8 (2023-04-05)

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

0.2.7 (2023-03-22)

Bug Fixes

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

0.2.6 (2023-02-08)

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

0.2.5 (2023-01-23)

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

0.2.4 (2023-01-09)

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

0.2.3 (2022-12-08)

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

0.2.2 (2022-11-21)

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

0.2.1 (2022-11-14)

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

0.2.0 (2022-08-09)

Features

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

0.1.8 (2022-08-04)

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

0.1.7 (2022-07-18)

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

0.1.6 (2022-06-29)

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

0.1.5 (2022-06-07)

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

0.1.4 (2022-05-27)

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

0.1.3 (2022-05-12)

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

0.1.2 (2022-04-21)

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

0.1.1 (2022-03-08)

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

0.1.0 (2022-03-04)

Features

  • leverage latest Spectrum button API (9caf2f6)