Labels are a visual pattern used to categorize information providing quick and easy recognition.
install yarn add @clayui/label version use import 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
import {Provider } from '@clayui/core' ;
import Label from '@clayui/label' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<>
<Label displayType = "success" >Label Success</Label >
<Label displayType = "info" >Label Info</Label >
<Label displayType = "secondary" >Label Secondary</Label >
<Label displayType = "warning" >Label Warning</Label >
<Label displayType = "danger" >Label Danger</Label >
</>
</div >
</Provider >
);
}Show code Closing Actions
This property is mandatory if you want make your label dismissible.
Use closeButtonProps
In this example, an Id was settled for the closing element:
import {Provider } from '@clayui/core' ;
import Label from '@clayui/label' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Label
closeButtonProps = {{
'aria-label' : 'Close' ,
title : 'Close' ,
id : 'closeId' ,
}}
displayType = "success"
>
Label Text
</Label >
</div >
</Provider >
);
}Show code You can also set a state for the visibility of the Label for example, handling onClick property on the closing element.
import {Provider } from '@clayui/core' ;
import Label from '@clayui/label' ;
import React from 'react' ;
export default function App () {
const [visible , setVisible ] = React .useState (true );
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
{visible && (
<Label
closeButtonProps = {{
'aria-label' : 'Close' ,
title : 'Close' ,
onClick : () => setVisible ((val ) => ! val ),
}}
displayType = "success"
>
Label Text
</Label >
)}
</div >
</Provider >
);
}Show code 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
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
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
