sp-clear-button

NPM 1.4.0

View Storybook

Try it on webcomponents.dev
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? Try it on webcomponents.dev

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 close icon.

<sp-clear-button>Reset</sp-clear-button>

Label

The label for an <sp-clear-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 screen readers.

Default slot 
<sp-clear-button>Clear</sp-clear-button>
 Label attribute 
<sp-clear-button label="Clear">Clear</sp-clear-button>

Options

Sizes

Small 
<sp-clear-button size="s">Small</sp-clear-button>
 Medium 
<sp-clear-button size="m">Medium</sp-clear-button>
 Large 
<sp-clear-button size="l">Large</sp-clear-button>
 Extra Large 
<sp-clear-button size="xl">Extra Large</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>Normal</sp-clear-button>
    <sp-clear-button 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 onclick="spAlert(this, '<sp-clear-button> clicked!')">
    Click me
</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 autofocus>Clear</sp-clear-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-clear-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. 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' | '' '' The visual variant to apply to this button.

Slots

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

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)