# ElvixSecuredBadge

> The official "Secured by elvix" pill chip with the shield mark. Same visual language as Stripe's "powered by" chip, drop-in anywhere you want users to see their sign-in is governed by elvix.

<!-- app/(marketing)/footer.tsx -->
```tsx
import { ElvixSecuredBadge } from "@elvix.is/sdk/react";

export function Footer() {
  return (
    <footer className="flex items-center justify-between px-6 py-4">
      <span className="text-sm text-zinc-500">© 2026 Acme, Inc.</span>
      <ElvixSecuredBadge variant="outline" theme="light" size="sm" />
    </footer>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `variant` | `"white" \| "dark" \| "outline"` | optional | `"white"` | Surface preset. Outline inherits host contrast via `theme`. |
| `size` | `"sm" \| "md" \| "lg"` | optional | `"md"` | Height / padding / font preset. |
| `theme` | `"light" \| "dark"` | optional | `"dark"` | Tunes the outline variant to the host page contrast. |
| `accentColor` | `string` | optional | `"#8e7dff"` | Active-protection dot colour. Defaults to brand lavender. |
| `href` | `string` | optional | `"https://elvix.is"` | Link target. Opens in a new tab with `rel="noopener noreferrer"`. |
| `className` | `string` | optional | `""` | Extra layout classes on the anchor. |
| `width` / `height` / `minWidth` / `maxWidth` / `minHeight` / `maxHeight` | `ElvixSizeProps` | optional | `—` | Dimensional overrides. Merged after the `size` preset and win. |

> **Note:** The badge is inline-styled by design so it renders correctly in customer apps with no CSS reset, no Tailwind, no design system. Do not wrap it in a parent that forces `display`, `font-family`, or `line-height` and expect the visuals to follow. Override via `className` or `ElvixSizeProps` instead.

## On a dark surface

For dark sign-in chrome or dark hero sections, the `dark` variant ships its own contrast. The `outline` variant with `theme="dark"` is the alternative when you want a transparent fill.

<!-- app/sign-in/chrome.tsx -->
```tsx
import { ElvixSecuredBadge } from "@elvix.is/sdk/react";

export function SignInChrome() {
  return (
    <div className="flex flex-col items-center gap-4 bg-zinc-950 p-8">
      {/* ...your sign-in card... */}
      <ElvixSecuredBadge variant="dark" size="md" />
    </div>
  );
}
```


## Related

- [ElvixCard](/docs/components/elvix-card.md): The chrome every SDK lives in. Brand-tinted border, Secured-by-elvix badge breakpoint, scrollable body + pinned footer pattern.
- [ElvixProvider](/docs/components/elvix-provider.md): Top-level context. Fetches the brand chord, factor config, and copy from elvix; pipes session state and the event channel to every nested <Elvix*> component.