Label

Stable3.106.1View in LexiconCHANGELOG

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:

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:

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