Components and Props
Spreading and Forwarding Props
Written by Swapnil RajaPublished
Spreading props lets a wrapper accept everything the underlying element accepts, without listing every attribute by hand.
Forwarding the rest
Rest destructuring separates the props you handle from the ones you pass straight through. The component takes what it needs and forwards the remainder untouched.
A button wrapper that stays flexible
jsx
function Button({ tone = "neutral", ...rest }) {
const background = tone === "primary" ? "#007a96" : "#e2e8f0"
const color = tone === "primary" ? "#ffffff" : "#0f172a"
// Everything not named above — onClick, disabled, type, aria-label — is
// handed to the real button.
return (
<button
{...rest}
style={{ background, color, border: 0, borderRadius: 6, padding: "6px 12px" }}
/>
)
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
<div style={{ display: "flex", gap: 8 }}>
<Button tone="primary" onClick={() => alert("clicked")}>
Click me
</Button>
<Button disabled title="Explained by the title attribute">
Disabled
</Button>
</div>
)