Skip to content
flood.md
v0.2.10

Text

Role-based interface text, from introductory copy to small supporting details.

Preview

A calm foundation for your next idea.

Use Text

Text is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
text.tsxTSX
"use client";

import { FloodRoot, Stack, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Stack gap="3">
        <Text as="p" size="lead">A calm foundation for your next idea.</Text>
        <Text as="p" size="compact">Use the space to make it yours.</Text>
      </Stack>
    </FloodRoot>
  );
}

Design notes

  • Use as="p" for paragraphs. The label size does not create a form association.
  • Subtle is a supplementary tone; evaluate small required instructions against the actual background and font size.

API reference

PropValuesDefault
as"span" | "p" | "div""span"
size"lead" | "body" | "compact" | "label" | "helper""body"
tone"default" | "subtle" | "error" | "success" | "warning" | "info""default"
Native HTML propsHTMLAttributes<HTMLElement>Forwarded
View TypeScript source
Page MarkdownAgent skill