Label
View in LexiconLabels 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'; |
Table of Contents
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/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>
);
}
Closing Actions
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Label
closeButtonProps={{
'aria-label': 'Close',
title: 'Close',
id: 'closeId',
}}
displayType="success"
>
Label Text
</Label>
</div>
</Provider>
);
}
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, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [visible, setVisible] = useState(true);
return (
<Provider spritemap="/public/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>
);
}
Table of Contents