Padding
A small spacing wrapper using the Toucan scale.
Add it to your project
Eject the complete padding group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject paddingbash
npx toucan eject paddingapp.tsx
import { Padding } from '@/components/toucan/padding';Use when
A wrapper needs one, two, or four scale-based padding values.
Avoid when
The component already exposes a semantic padding prop.
Example
Two scale steps on every side
Two vertical and six horizontal scale steps
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Padding
Padding
Props type: PaddingProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
padding | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | readonly [GridGap] | readonly [GridGap, GridGap] | readonly [GridGap, GridGap, GridGap, GridGap] | 3 | No | Internal spacing from the Toucan scale. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
PaddingProps, PaddingScale, PaddingSize
ts
export type PaddingScale = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16;ts
export type PaddingSize = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | readonly [GridGap] | readonly [GridGap, GridGap] | readonly [GridGap, GridGap, GridGap, GridGap];Accessibility
- Padding is visual only and does not alter document semantics.
Token families
scale