Stable3.88.0View 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:
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)