Create a custom component

GoalLink to this section

Create an enquiry action that can be reused in code-owned pages. Use Systhema's Button and typography so a design change updates every instance.

1. Check the catalog and tokensLink to this section

Look for a shipped component before writing one. Read Button, Paragraph and the project's button variants. This example uses the default primary variant.

2. Create the componentLink to this section

import { Button, ButtonTitle, Paragraph } from '@systhemaui/next'

type EnquiryActionProps = {
  href: string
  label?: string
}

export function EnquiryAction({ href, label = 'Discuss your project' }: EnquiryActionProps) {
  return (
    <Paragraph>
      <Button.a href={href} variant="primary">
        <ButtonTitle>{label}</ButtonTitle>
      </Button.a>
    </Paragraph>
  )
}

The Paragraph supplies the content rhythm for a single inline action. A row of several actions would use Stack instead.

3. Use it inside a content containerLink to this section

import { Section, Heading, Paragraph } from '@systhemaui/next'
import { EnquiryAction } from './EnquiryAction'

export function ContactSection() {
  return (
    <Section>
      <Heading.h2>Start with a conversation</Heading.h2>
      <Paragraph>Tell us what your team needs from its next workplace.</Paragraph>
      <EnquiryAction href="/contact" />
    </Section>
  )
}

Render ContactSection inside an Article. For multilingual sites, supply a locale-aware href from the application's routing helpers. Do not hardcode the default locale into a shared action.

4. Keep styling in the design systemLink to this section

Use named variants, token typography and semantic color slots. Do not add a raw background, radius or padding to imitate the shipped Button. If every primary button needs a change, update its design tokens.

Add 'use client' only when the component itself needs browser state or events. Keep runtime imports from payload and the bare core barrel out of client-reachable code. For client token access, use @systhemaui/core/client.

If editors must choose this composition in rich text, register a custom block. A TSX component alone does not add an Admin block.

Check your workLink to this section

• The action uses the project's named variant.
• It has a readable accessible name and visible keyboard focus.
• It inherits the parent theme and spacing.
• Locale-specific pages link to the intended contact page.
• Type checking and lint pass.