Installing <Label> Component

There are 2 ways to install <Label> component into your react app project:

  • Install the Specific Package of <Label> Component
  • Install the Whole Reusable-UI Component Pack, including the <Label> Component

Variant Properties

The alternative appearances of the <Label> layout without changing the <Label>'s functionality.

labelStyle Property

Sets the alternative appearances of the <Label>.

The possible values are:

  • undefined
  • 'regular'
  • 'content'

Here the preview:

Preview
A <Label> with regular styleA <Label> with content style

Show code

size Property

Defines the alternative size of the <Label>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview
An <Label> with sm sizeAn <Label> with md sizeAn <Label> with lg size

Show code

theme Property

Defines the contextual theme of the <Label>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview
An <Label> with primary themeAn <Label> with secondary themeAn <Label> with success themeAn <Label> with info themeAn <Label> with warning themeAn <Label> with danger themeAn <Label> with light themeAn <Label> with dark theme

Show code

gradient Property

Activates a 3D mode of the <Label>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <Label> with gradient modeAn <Label> with gradient modeAn <Label> with gradient modeAn <Label> with gradient modeAn <Label> with gradient modeAn <Label> with gradient modeAn <Label> with gradient modeAn <Label> with gradient mode

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Label>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <Label> with outlined modeAn <Label> with outlined modeAn <Label> with outlined modeAn <Label> with outlined modeAn <Label> with outlined modeAn <Label> with outlined modeAn <Label> with outlined modeAn <Label> with outlined mode

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Label>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
An <Label> without mild modeAn <Label> without mild modeAn <Label> without mild modeAn <Label> without mild modeAn <Label> without mild modeAn <Label> without mild modeAn <Label> without mild modeAn <Label> without mild mode

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Label>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
An <Label> with nude modeAn <Label> with nude modeAn <Label> with nude modeAn <Label> with nude modeAn <Label> with nude modeAn <Label> with nude modeAn <Label> with nude modeAn <Label> with nude mode

Show code

Variables

There are several variables of <Label> you can customize. Changing the variables affects all <Label> instance and other components that depend on <Label>.

Here the exposed variables:

  • No variable yet

The example of accessing, modifying, & adding variables:

Show code