Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Release notes
  • Recommendations
  • Usage boundaries
  • API reference

Typography

Text

Renders accessible body paragraphs with consistent typographic scale and wrapping.

idle

Usage

import { Text } from "@mizen-labs/ui";

Examples

Release notes

Recommendations

GuidancePractice
Do

Use body for prose, ui for dense interface text, and caption for metadata. Set tone="muted" for supporting text; muted ink keeps readable contrast at every size.

Usage boundaries

GuidanceBoundary
Scope

Use Heading for headings and Label for controls. Text renders body paragraphs.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
size"body" | "caption" | "ui""body"Sets the type role: body for prose, ui for dense interface text, caption for metadata.
tone"default" | "muted""muted" for caption, otherwise "default"Sets the ink. Use muted for supporting text such as descriptions and metadata.
childrenReactNode—Text or phrasing content.
PreviousLinkNextVisually Hidden

Updated October 28 · 3 min read

A saved view keeps your filters, sort order, and columns. Open it from the sidebar to pick up where you left off.

Shared views need edit access on a paid plan.

Mizen helps teams compose interfaces with consistent tokens, accessible markup, and theme-driven styles.

Body text sets the primary reading size for cards, articles, dialog descriptions, and settings panels.

Helper copy and supporting details remain readable in dense sidebars, table rows, and form fields.

Updated 2 minutes ago by Sam.

When an explanation runs long on small screens, the paragraph wraps naturally to maintain a comfortable reading flow and keep surrounding spacing tidy.