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
  • Display heading (h1)
  • Title heading (h2)
  • Section heading (h3)
  • Subsection heading (h4, default size)
  • Minor heading (h5, default size)
  • Detail heading (h6, default size)
  • Default heading (default level 2, default size)
  • Recommendations
  • Usage boundaries
  • API reference

Typography

Heading

Renders accessible section headings with independent semantic and visual levels.

idle

Usage

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

Examples

Display heading (h1)

Title heading (h2)

Section heading (h3)

Subsection heading (h4, default size)

Minor heading (h5, default size)

Detail heading (h6, default size)

Default heading (default level 2, default size)

Recommendations

GuidancePractice
Do

Choose level from the document hierarchy and size from the desired visual emphasis.

Usage boundaries

GuidanceBoundary
Scope

Visual size does not replace semantic level. Avoid skipping heading levels to obtain a particular appearance.

API reference

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

PropTypeDefaultDescription
level1 | 2 | 3 | 4 | 5 | 62Selects the semantic heading level (h1 through h6).
size"display" | "heading" | "subheading" | "title""heading"Sets the visual typography scale independently from semantic level.
childrenReactNode—Heading text or phrasing content.
PreviousCodeNextKbd

Deployment guide

Before you start

Run the deploy

Display heading (h1)

Title heading (h2)

Section heading (h3)

Subsection heading (h4, default size)

Minor heading (h5, default size)
Detail heading (h6, default size)

Default heading (default level 2, default size)