Trailing Action (deprecated)

Trailing Action (deprecated)

The trailing action is used in removable input chips. It is a subcomponent of the chips and intended only for use in the context of a chip.

Basic Usage

HTML Structure

<button class="mdc-deprecated-chip-trailing-action"
        aria-label="Remove chip"
        tabindex="-1">
  <span class="mdc-deprecated-chip-trailing-action__ripple"></span>
  <span class="mdc-deprecated-chip-trailing-action__icon material-icons">close</span>
</button>

Styles

@use "@material/chips/mdc-deprecated-chip-trailing-action";

Variants

Non-navigable trailing action

In some cases, the trailing action should be non-navigable. To accomplish this, swap the aria-label for aria-hidden="true".

<button class="mdc-deprecated-chip-trailing-action"
        aria-hidden="true"
        tabindex="-1">
  <span class="mdc-deprecated-chip-trailing-action__icon material-icons">close</span>
</button>

Accessibility

Material Design spec advises that touch targets should be at least 48 x 48 px. To meet this requirement, add the following to your trailing action:

<button class="mdc-deprecated-chip-trailing-action"
        aria-label="Remove chip"
        tabindex="-1">
  <span class="mdc-deprecated-chip-trailing-action__ripple"></span>
  <span class="mdc-deprecated-chip-trailing-action__touch"></span>
  <span class="mdc-deprecated-chip-trailing-action__icon material-icons">close</span>
</button>

Style Customization

CSS Classes

CSS Class	Description
mdc-deprecated-chip-trailing-action	Mandatory.
mdc-deprecated-chip-trailing-action__icon	Mandatory. Indicates the chip icon.
mdc-deprecated-chip-trailing-action__ripple	Mandatory. Indicates the chip ripple.
mdc-deprecated-chip-trailing-action__touch	Optional. Renders an accessible touch target.

Sass Mixins

Mixin	Description
color($color)	Sets the trailing action color
size($size)	Sets the trailing action size
horizontal-spacing($left, $right)	Sets the trailing action horizontal spacing
touch-target-width($width)	Sets the trailing action touch target width

MDCChipTrailingAction Methods

Method Signature	Description
removeFocus() => void	Proxies to the foundation’s removeFocus method
focus() => void	Proxies to the foundation’s focus method
isNavigable() => void	Proxies to the foundation’s isNavigable method

Events

Event Name	event.detail	Description
MDCChipTrailingAction:interaction	{trigger: InteractionTrigger}	Indicates the trailing action was interacted with via mouse or keyboard
MDCChipTrailingAction:navigation	{key: string}	Indicates a navigation event has occurred on a trailing action

NOTE: All of MDCChipTrailingAction’s emitted events bubble up through the DOM.

Usage within Web Frameworks

If you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCChipTrailingActionAdapter

See component.ts for a vanilla DOM implementations of the adapter API for reference.

Method Signature	Description
focus() => void	Gives focus to the root element
getAttribute(attr: string) => string|null	Returns the attribute value, if present
notifyInteraction(trigger: InteractionTrigger) => void	Notifies the Chip that the trailing action has been interacted with
notifyNavigation(key: string) => void	Notifies the Chip that the trailing action was navigated
setAttribute(attr: string, value: string) => void	Sets an attribute on the root to the given value

MDCChipTrailingActionFoundation

Method Signature	Description
removeFocus() => void	Removes focus from the trailing action
focus() => void	Gives focus to the trailing action
isNavigable() => boolean	Returns the navigability of the trailing action
handleClick(evt: MouseEvent) => void	Handles a click event on the root element
handleKeydown(evt: KeyboardEvent) => void	Handles a keydown event on the root element

MDCChipTrailingActionFoundation Event Handlers

When wrapping the trailing action foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
click	.mdc-deprecated-chip-trailing-action (root)	handleClick()
keydown	.mdc-deprecated-chip-trailing-action (root)	handleKeydown()