Label

The Label component is a fundamental UI element used to display static text or descriptive information within an application. It is often paired with form elements, such as text fields and checkboxes, to provide context or instructions to users. Labels enhance accessibility by improving the usability and readability of the interface, ensuring that users understand the purpose and function of adjacent elements.

Import

To utilize the Label prop, import it from @vivakits/react-components

import { VKLabel } from "@vivakits/react-components";

Color

The color prop specifies the text color of the label. This allows to tailor the label's text color to fit the design of the application. There are 7 predefined values for color prop.

Decoration Color

The decorationColor prop defines the color of the text decoration, such as underlines or line-through effects. Accepts any valid CSS color value. This prop is useful for ensuring that decorative elements match overall color scheme. It accepts 8 values.

Size

The size prop determines the font size of the label text. This prop allows to adjust the size of the text to ensure readability and visual hierarchy within the UI. There are 5 predefined sizes.

Alignment

The align prop sets the text alignment within the label. This allows control over the horizontal positioning of the label's content, making it easy to align text according to your layout requirements. It accepts 3 prosition values.

Font Family

The fontFamily specifies the font family for the label text. This allows to use custom fonts to match your brand's typography. 4 types are allowed for this.

Decoration

The decoration prop defines the text decoration style, such as underline overline or line-through. This prop enables you to add visual emphasis to the text, which can be useful for indicating links, completed tasks, or other special statuses. There are 4 variants of this.

Word spacing

The wordSpacing prop sets the spacing between words in the label text. This prop allows to adjust the spacing to improve readability or to achieve a specific visual effect. The are 6 possible values.

Weight

The weight prop specifies the font weight of the label text. Accepts 10 predefined values. This allows to make the text appear bolder or lighter to enhance emphasis or match the design specifications.

isRequired

This is a boolean prop indicating whether the field associated with this label is required or not. This can be controlled using isRequired prop.

isDisabled

This is a boolean prop that specifies whether the label should appear as disabled or not. It can be controlled using isDisabled prop

hasError

If true, applies styles indicating that the label is associated with a field that has an error. This usually involves changing the text color to red to signify an error, helping to draw the user's attention to the problematic field.

italic

If italic prop is set to true, it renders the label text in italic. This can be useful for emphasizing certain words or phrases within the label.

bold

If bold prop is set to true, it renders the label text in bold. This can help to highlight important information or headings.

gutterBottom

If gutterBottom is set to true, it adds spacing below the label. This is useful for creating visual separation between the label and subsequent elements.

gutterTop

If gutterTop is set to true, it adds spacing below the label. This is useful for creating visual separation between the label and subsequent elements.

disableCopy

If disableCopy is set to true, prevents the text of the label from being copied to the clipboard. This can be useful in scenarios where the label contains sensitive information or where you want to prevent users from copying certain text.

Example

Below are few examples for the usage of Label component

API Reference