Label

Install and import

yarn add @welcome-ui/label @xstyled/styled-components @xstyled/system react react-dom styled-components

import { Label } from '@welcome-ui/label'

Default

label DOM, use on Field.

Default label
Show editor

Required

With required property.

Required label
Show editor

Variants

error, warning, info or success variant add specific badge, you can add a custom one as well.

Warning variant
Error variant
Info variant
Success variant
🐶
Custom icon
Show editor

More content

Checkboxes and radio buttons are normally nested inside labels. If you do this, make sure there is only one other child (in this example, a div).

Error variant with a link and all of that jazz because of the fox
Show editor

Disabled

Customize label for disabled elements.

Disabled label
🔒
Custom icon disabled label
🔒
Disabled custom icon warning label
Show editor

Properties

Dependencies

• - @welcome-ui/icons.lock
  ^2.0.2
• - @welcome-ui/system
  ^2.0.2
• - @welcome-ui/utils
  ^2.0.2
• - @welcome-ui/variant-icon
  ^2.1.3

Peer dependencies

• - @xstyled/styled-components
  ^1.17.0
• - @xstyled/system
  ^1.17.0
• - react
  ^16.10.2
• - react-dom
  ^16.10.2
• - styled-components
  ^4.0.0 || ^5.0.0