Text

A run of small body copy, styled at the library's default text size and the neutral muted foreground color.

September usage

Billed on 1 October · Pro plan

Requests1,284,902 of 2M

Bandwidth38.4 GB

Overage is charged at $0.40 per additional 100k requests.

View code

<Card>
	<Card.Header>
		<Card.Title>September usage</Card.Title>
		<Text>Billed on 1 October · Pro plan</Text>
	</Card.Header>
	<Card.Content>
		<div mix={[hstack({ gap: 2, align: "baseline", justify: "between" })]}>
			<Text>Requests</Text>
			<span>
				1,284,902 <Text>of 2M</Text>
			</span>
		</div>

		<div mix={[hstack({ gap: 2, align: "baseline", justify: "between" })]}>
			<Text>Bandwidth</Text>
			<span>
				38.4 <Text>GB</Text>
			</span>
		</div>

		<Separator />

		<Text>Overage is charged at $0.40 per additional 100k requests.</Text>
	</Card.Content>
</Card>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Text } from "@sdxc/ui";

Renders its children inside a <span> sized and colored as a small run of body copy: the library's default text size paired with the neutral muted foreground color.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"span">.