Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Label

yarn add @clayui/label

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

  • Examples
  • Markup
  • API

Stable3.88.0View in LexiconCHANGELOGstorybook demos

  • Display Types
  • Closing Actions

Overview

ClayLabel offers two different APIs for use by toggling the prop withClose. By default(withClose={true}), ClayLabel 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:

Copied!

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:

Copied!
Code Sample (expand to see it)

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

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!