Components

Error

Inline error messages tied to the field or action that failed.

<Label for="email">Email</Label>
<Input
  id="email"
  type="email"
  defaultValue="hello@buena"
  aria-invalid="true"
  className="border-error"
/>
<p class="text-error text-xs">Enter a valid email.</p>

<Error
  error={{
    message: "Could not publish hello-world.md.",
    action: "Contact support",
    link: "https://buenalabs.io/support",
  }}
/>

geist's error prop takes an object — { message, action, link } — rendering the message with a concrete recovery action linked to link.

Small vs. large matches geist's size="small" | "large". The leading Error label is the geist Custom label — pass label="Sync Error" to rename it, or label={false} to drop it and show only the message.

Markdown for agents: /design/error.md · spec: /design.md