layout/@mihcm/ui·v0.21.0·stable
SectionHeader
Two-line header (title + optional muted description) with an optional trailing action slot. Used inside cards and editors.
Props
The full prop API for SectionHeader. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
title | ReactNode | — | Primary heading text. | 0.4.0 |
description | ReactNode | — | Optional muted description below the title. | 0.4.0 |
action | ReactNode | — | Optional trailing slot (badge, button, link). | 0.4.0 |
padding / paddingX / paddingY / paddingTop / paddingRight / paddingBottom / paddingLeft | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Tokenized padding controls for contained headers. | 0.8.2 |
margin / marginX / marginY / marginTop / marginRight / marginBottom / marginLeft | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Tokenized margin controls. Use margin="none" to remove built-in spacing. | 0.8.2 |
surface | 'transparent' | 'card' | 'muted' | 'primary' | 'accent' | 'success' | 'warning' | 'destructive' | 'transparent' | Tokenized background and foreground treatment. | 0.8.2 |
border | 'none' | 'top' | 'bottom' | 'y' | 'full' | 'none' | Optional border placement. | 0.8.2 |
radius | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'none' | Optional radius for contained section headers. | 0.8.2 |
shadow | 'none' | 'sm' | 'md' | 'none' | Optional elevation token. | 0.8.2 |
Import
import { SectionHeader } from '@mihcm/ui/SectionHeader';