Layout components
Use these primitives to keep spacing and call-to-action styling consistent throughout your MDX pages. They render server-side safely and share the same CSS used across the starter site.
Container
Wrap a section in a centered, padded shell that respects the project’s max width. Add extra utility classes via className to tune background or spacing.
<Container> Textual content goes here. </Container>Textual content goes here.
| Attribute | Values | Purpose |
|---|---|---|
className | string (optional) | Extends the base spacing/width utilities with custom classes. |
Button
Render a call to action with the Canopy button styles. label provides the text, while variant toggles between primary and secondary styles.
<Button href="/about" label="Read more" target="_blank" variant="primary" />| Attribute | Values | Purpose |
|---|---|---|
label | string | Text shown inside the button. |
href | string | Destination URL for the anchor element. |
variant | primary, secondary | Controls color treatment; defaults to 'primary'. |
target | string (optional) | Anchor target (_blank, etc.); auto-adds rel="noopener noreferrer". |
rel | string (optional) | Custom rel attribute; overrides the auto-generated value when present. |
className | string (optional) | Appends classes before the variant modifier. |
ButtonWrapper
Arrange multiple buttons with a consistent gap. Useful for callouts with buttons clustered in prose.
<ButtonWrapper> <Button href="/search" label="Browse" /> <Button href="/about" label="About" variant="secondary" /></ButtonWrapper>| Attribute | Values | Purpose |
|---|---|---|
className | string (optional) | Extends the default flex and gap utilities. |