Label

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';

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:

Open on CodeSandboxOpen Sandbox
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

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:

Open on CodeSandboxOpen Sandbox
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.

Open on CodeSandboxOpen Sandbox
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>
	);
}

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<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>>
Edit this page on GitHub

Table of Contents