MobileBetaFoundations

Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.

When to use

For every text of a React Native screen: titles, body, captions, labels, figures (mono).

When not to use

On the web: use the preset's text utilities (text-fg, font-display).Use instead: Theme
For a status label.Use instead: Badge

Installation

Install

npx expo install react-native-svg
npm install @krizaka/ui@beta

Import

import { Txt } from "@krizaka/ui/native";

Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.

Examples

React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.

Variants

display, title, body, caption, label, mono.

import { Txt } from "@krizaka/ui/native";

// The platform's type scale: display · title · body · caption · label · mono.
export default function NativeTxtVariants() {
  return (
    <>
      <Txt variant="display">Every night, a new set.</Txt>
      <Txt variant="title">Every night, a new set.</Txt>
      <Txt variant="body">Every night, a new set.</Txt>
      <Txt variant="caption">Every night, a new set.</Txt>
      <Txt variant="label">Every night, a new set.</Txt>
      <Txt variant="mono">01:24:09</Txt>
    </>
  );
}

Tones

text, secondary, muted, accent.

import { Txt } from "@krizaka/ui/native";

// The text roles; `muted` reaches AA only as large text, like the status roles.
export default function NativeTxtTones() {
  return (
    <>
      <Txt tone="text">Every night, a new set.</Txt>
      <Txt tone="secondary">Every night, a new set.</Txt>
      <Txt tone="muted" variant="display">
        Every night, a new set.
      </Txt>
      <Txt tone="accent" variant="title">
        Every night, a new set.
      </Txt>
    </>
  );
}

Props

Text in the platform's scale, coloured by a role of the current theme. title and display are headers for screen readers.

Prop	Type	Default	Description
`tone`	`TxtTone`	`text`	A text role of the theme (default `text`).
`variant`	`TxtVariant`	`body`	The type scale: display · title · body (default) · caption · label · mono (tabular figures).

Accessibility

title and display are headers for screen readers.
It follows the system's font scaling.

Best practices

Pick a variant from the scale and a tone from the roles: never a font size or a colour by hand.
muted only for large text or what is off: it reaches AA only as large text.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Txt