Body is for longer passages of text — paragraphs,
descriptions, list-item copy. It renders a <p>. This
very sentence is rendered with Body, as is every prose
paragraph across these docs.
Body is one of five components — alongside Display, Headline, Title, and Label —
implementing the Material Design 3 type scale. They share the same prop shape (size, emphasized) and differ only in typescale role and element
tag.
medium is the workhorse size for most running text; small suits dense UI copy like helper text, and large suits lead paragraphs or pull-quotes.
import { Body } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Size and emphasized Controls.
<script lang="ts">
import { Body } from '@noxlovette/material';
</script>
<Body size="medium">Some descriptive paragraph text.</Body> | Prop | Type | Default | Description |
|---|---|---|---|
children required | Snippet | — | The text content, rendered inside a <p>. |
size | "small" | "medium" | "large" | "medium" | Selects the M3 type-scale token, e.g. md-sys-typescale-body-large. |
emphasized | boolean | false | Bumps the font weight to medium for extra emphasis. |
class | string | — | Additional classes merged onto the root element, e.g. a color-role utility. |
Not a heading
Renders as a plain <p> — never a substitute for a real heading; use Display/Headline/Title for that.
Inherits color
Body sets no color itself; pair with an on-surface color-role utility to guarantee contrast against its background.