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
property you can use these color variations on Label component:
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
property for applying custom properties to the button that wraps the closing icon.
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
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>> | nullEdit 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