DocsDocsSDKs

Button

React SDK guidance for Button.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

When to use it

Use Button for primary actions, low-emphasis secondary actions, and inline text-like actions that still need the same spacing and state model as the rest of the SDK.

The safest default is to choose the closest built-in variant and size first. Reach for background, foreground, and border only when the surface already has a semantic token story and the built-in presets are too generic.

Prefer variants before overrides

Start with solid, soft, outlined, plain, secondary, or link. Token overrides work best when they are rare and clearly tied to a themed campaign or editorial block.

Composition notes

  • Use startSlot and endSlot for icons and badges instead of manually padding children.
  • Use asChild when the semantic element should be a link or another interactive root, but you still want the button recipe.
  • Keep destructive intent explicit with variant="destructive" instead of only changing color tokens.

Theming guidance

The semantic color props are useful for storefront campaigns because they let a button inherit tone from the surrounding section without forking the recipe. That keeps hover, focus, spacing, and icon alignment consistent while still giving design room to art-direct a CTA.

For marketing-heavy pages, prefer passing theme tokens like var(--foreground) or var(--accent) instead of hard-coded hex values so the same authored example stays portable across presets and brands.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/ui-resolver.
  • Playground route: /sandbox?component=Button.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

Button

# Button > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/ui-resolver`. - Live playground: [/components/base-ui/button](https://sdk.enad.io/components/base-ui/button). ## When to use it Use `Button` for primary actions, low-emphasis secondary actions, and inline text-like actions that still need the same spacing and state model as the rest of the SDK. The safest default is to choose the closest built-in `variant` and `size` first. Reach for `background`, `foreground`, and `border` only when the surface already has a semantic token story and the built-in presets are too generic. > **Prefer variants before overrides** > > Start with `solid`, `soft`, `outlined`, `plain`, `secondary`, or `link`. Token overrides work best > when they are rare and clearly tied to a themed campaign or editorial block. ## Composition notes - Use `startSlot` and `endSlot` for icons and badges instead of manually padding children. - Use `asChild` when the semantic element should be a link or another interactive root, but you still want the button recipe. - Keep destructive intent explicit with `variant="destructive"` instead of only changing color tokens. ## Theming guidance The semantic color props are useful for storefront campaigns because they let a button inherit tone from the surrounding section without forking the recipe. That keeps hover, focus, spacing, and icon alignment consistent while still giving design room to art-direct a CTA. For marketing-heavy pages, prefer passing theme tokens like `var(--foreground)` or `var(--accent)` instead of hard-coded hex values so the same authored example stays portable across presets and brands. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/ui-resolver`. - Playground route: /sandbox?component=Button. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes