text

import { Text } from "woly";

Text component is used as a simple text or a hint/error message for Input or TextArea components.

Example

Paragraph Mini, 

Paragraph Extra small, 

Paragraph Small, 

Paragraph Large 

Subtitle, 

Subtitle

Description, 

Description

<Playground direction="vertical">
  <Line>
    <Text type="M">Paragraph Mini,&nbsp;</Text>
    <Text type="XS">Paragraph Extra small,&nbsp;</Text>
    <Text type="S">Paragraph Small,&nbsp;</Text>
    <Text type="L">Paragraph Large&nbsp;</Text>
  </Line>
  <Line>
    <Text type="subtitle">Subtitle,&nbsp;</Text>
    <Text type="subtitle" weight="medium">
      Subtitle
    </Text>
  </Line>
  <Line>
    <Text type="hint" weight="light">
      Description,&nbsp;
    </Text>
    <Text type="hint" weight="regular">
      Description
    </Text>
  </Line>
</Playground>

Example

! Fix examples below after inserting text inside Input or TextArea

<Playground direction="vertical">
  <Text priority="danger" type="hint">
    ! Fix examples below after inserting text inside Input or TextArea
  </Text>
</Playground>

Priorities

Hint priority can be used to give user a hint or additional information.

Description/Hint

<Playground direction="vertical">
  <TextArea
    name="name"
    onChange={(event) => console.info('On TextArea change')}
    placeholder="Enter your name here"
    type="text"
    value="Hi"
  />
  <Text priority="primary" type="hint">
    Description/Hint
  </Text>
</Playground>

Error priority can be used to focus user attention on error.

Error text

<Playground direction="vertical">
  <Input
    name="name"
    onChange={(event) => console.info('On input change')}
    placeholder="Enter your name here"
    type="text"
    value="Hi"
    priority="danger"
  />
  <Text priority="danger" type="hint">
    Error text
  </Text>
</Playground>

Kinds

NameDescription
TextBase text. Useful for creating a new kind of text

Props

NameTypeDefaultDescription
prioritystring'secondary'Priority prop to style Text component
type'L' ӏ 'S' ӏ 'XS' ӏ 'M'ӏ 'subtitle' ӏ 'hint''subtitle'Type of text
weight'medium' ӏ 'regular' ӏ 'light''regular'Font weight of text