Text

Text is a fundamental component in every Design System. It is used to communicate information to the user and is a key part of the user interface. Text can be used in a variety of ways, such as headings, body text, buttons, links, and more.

Usage

import { BakaText } from "baka-ui";

function MyApp() {
  return (
    <BakaText>
      Hello, <em>Baka</em> UI!
    </BakaText>
  );
}

Variants

Text can be styled in a variety of ways to convey different meanings or to create visual hierarchy. The following variants are available and are grouped into five categories: display, headline, title, label, and body.

Color Variations

In addition to the typography variants, the Text component also provides color variants through the variant property. Setting variant={"variant"} will apply the respective on-variant color to the text.

import { BakaText } from "baka-ui";

function MyApp() {
  return <BakaText variant="variant">subtext</BakaText>;
}

Polymorphic Rendering

The Text component is designed to work with any DOM element and allows for polymorphic rendering. The Text component can also be composed from multiple components like the next/link's Link component, according to the application requirements.

import { BakaText } from "baka-ui";

function MyApp() {
  return (
    <>
        <BakaText as="h1">
        Hello, <em>Baka</em> UI!
        </BakaText>
        <BakaText as="a" href="www.baka-ui.com">
        Learn more
        </BakaText>
    <>
  );
}