Label

The Label component is used to display text labels with customizable styles and properties. It can be integrated into forms or other components where labeling is required.

Import

Phaselis exports one main component for Label.

import { Label } from "phaselis";

• Label: Main Component import for Label

Usage

Basic Label

import { Label } from "phaselis";

const Example = () => {
  return (
    <Label text="Header 1" variation="h1" style={{ text: { color: "#0c5ae9" } }} />
  );
};

export default Example;

Props

tip

Other than listed props below, you can pass any prop that a Text component accepts.

The props specify the properties available for the component, including options for text content, styling, and font customization.

text

string

Optional string to specify the label's text content.

<Label text="Text" />

style

Name	Type	Description
container	ViewStyle	Style for the outer container view.
text	TextStyle	Style for the label text.

You can either provide an object with container and text styles or directly provide TextStyle properties that will be applied to the text.

<Label
  text="Label"
  style={{
    container: {
      margin: 10,
      padding: 8,
    },
    text: {
      fontSize: 16,
      fontWeight: "bold",
      color: "#2a91ff",
    },
  }}
/>

// Direct text styling
<Label
  text="Direct Text Style"
  style={{ color: "red", fontSize: 18 }}
/>

containerStyle

ViewStyle

Additional style applied directly to the container View.

<Label 
  text="Custom Container" 
  containerStyle={{ 
    marginBottom: 10, 
    paddingHorizontal: 15,
    backgroundColor: "#f5f5f5",
    borderRadius: 4 
  }}
/>

children

ReactNode

Optional string to specify the content displayed within the children prop.

<Label>Phaselis Label</Label>

variation

default | h1 | h2 | h3 | h4 | h5 | h6 | p | quot | small

Determines the style of the label.

• default: Applies the default label style.
• h1: Applies the style of a header 1.
• h2: Applies the style of a header 2.
• h3: Applies the style of a header 3.
• h4: Applies the style of a header 4.
• h5: Applies the style of a header 5.
• h6: Applies the style of a header 6.
• p: Applies the style of a paragraph.
• quot: Applies the style of a quote.
• small: Applies the style of small text.

<Label text="Header 1" variation="h1" style={{ text: { color: "#0c5ae9" } }} />

bold

boolean

If true, applies bold text style to the label.

<Label text="Bold Text" bold />

italic

boolean

If true, applies italic text style to the label.

<Label text="Italic Text" italic />

weight

light | regular | medium | semiBold | bold

Defines the weight of the label text.

• light: Applies light font weight.
• regular: Applies regular font weight.
• medium: Applies medium font weight.
• semiBold: Applies semi-bold font weight.
• bold: Applies bold font weight.

<Label text="Light Text" weight="light" />

<Label text="Medium Text" weight="medium" />

<Label text="Bold Text" weight="bold" />