Section.Root groups related content. Section.Header combines Heading with a description and an optional adornment. Descriptions are ordinary text associated with the heading, so they do not add levels to the document outline.
Add a description and action
Section.Root defaults to a full-width div with left alignment and the primary text color. Use align, color, and fullWidth to adjust the content wrapper.
Section.Header can also be used by itself. Its level, size, and color configure the heading and default to 2, md, and primary. The header has one spacing-4 margin after it. Use native style or className to adjust that spacing.
Description overflow
String descriptions preserve line breaks, turn URLs into links, and show up to five lines. SetdescriptionLineClamp to a positive integer to choose another limit. Hovering or focusing an overflowing description reveals its full text; Escape dismisses the tooltip.
Pass a React node for richer supporting content. Rich descriptions render as supplied, without automatic truncation or tooltips.
Composition
Both parts forward native attributes, refs, class names, styles, andrender to their outer element. For example, Section.Root render={<section aria-label="Workspace settings" />} provides a named section, and Section.Header render={<header />} uses a header container.
Props
Section.Root
"center" | "left"
default:"left"
Text alignment within the section. Defaults to
left."primary" | "secondary" | "tertiary"
default:"primary"
Text color within the section. Defaults to
primary.boolean
default:"true"
Whether the section fills the available width. Defaults to
true.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.Section.Header
ReactNode
Content alongside the heading, such as an action button or status.
"primary" | "secondary" | "tertiary"
default:"primary"
Theme font color. Defaults to
primary.ReactNode
Supporting text associated with the heading. Strings support links and overflow tooltips; React nodes render as supplied.
number
default:"5"
Maximum visible lines for a string description. Defaults to
5. Overflowing descriptions can be read in a tooltip on hover or focus.5 | 1 | 2 | 3 | 4 | 6
default:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."sm" | "md" | "lg" | "xs"
default:"md"
Visual font size, independent of the heading level. Defaults to
md.ReactNode
required
Content of the section heading.