Labels are a visual pattern used to categorize information providing quick and easy recognition.

installyarn add @clayui/label
versionNPM Version
useimport Label from '@clayui/label';

Overview

Label offers two different APIs for use by toggling the prop withClose. By default(withClose={true}), Label behaves like a high-level component. If you want to use the lower-level components and compose multiple parts to your label, all you need to do is set withClose={false}.

Check out this storybook example for a demo.

Display Types

Using displayType property you can use these color variations on Label component:

Closing Actions

This property is mandatory if you want make your label dismissible.

Use closeButtonProps property for applying custom properties to the button that wraps the closing icon.

In this example, an Id was settled for the closing element:

You can also set a state for the visibility of the Label for example, handling onClick property on the closing element.

API Reference

ItemAfter

React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>

ItemBefore

React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>

ItemExpand

React.ForwardRefExoticComponent<React.BaseHTMLAttributes<HTMLSpanElement | HTMLAnchorElement> & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>

Label

IForwardRef<HTMLSpanElement | HTMLAnchorElement, IProps>
Parameters
Properties

closeButtonProps

(React.ButtonHTMLAttributes<HTMLButtonElement> & { ref?: (instance: HTMLButtonElement | null) => void; }) | undefined

HTML properties that are applied to the ‘x’ button.

innerElementProps

(React.BaseHTMLAttributes<HTMLSpanElement | HTMLAnchorElement> & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>) | undefined

Pros to add to the inner label item

spritemap

string | undefined

Path to the location of the spritemap resource used for Icon.

withClose

boolean | undefined

Flag to indicate if component should include the close button

dismissible

boolean | undefined

Flag to indicate if label-dismissible class should be applied.

displayType

"secondary" | "info" | "warning" | "danger" | "success" | "unstyled" | undefined

Determines the style of the label.

large

boolean | undefined

Flag to indicate if the label should be of the large variant.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko

Last edited May 11, 2025 at 5:57:01 PM