Section
Semantic full-width page band with background and spacing.
Add it to your project
Eject the complete section group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject sectionbash
npx toucan eject sectionapp.tsx
import { Section } from '@/components/toucan/section';Use when
A page needs a distinct semantic section or full-width surface band.
Avoid when
The wrapper has no document-outline meaning; use Box or Padding.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Section
Section
Props type: SectionProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
background | "primary" | "default" | "muted" | undefined | No | The semantic background treatment. |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | undefined | No | Space between child items from the Toucan scale. |
padding | "sm" | "md" | "lg" | "xl" | "none" | 'none' | No | Internal spacing from the Toucan scale. |
Also accepts the native HTML element attributes that are not replaced by a Toucan prop.
Type exports
SectionProps
Accessibility
- Renders a section element; include a heading when it represents a document section.
Token families
sectioncolor.surface