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.

Your sign-in card

Secured byelvix

app/(marketing)/footer.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.

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

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>
  );
}

ElvixCard

The chrome every SDK lives in. Brand-tinted border, Secured-by-elvix badge breakpoint, scrollable body + pinned footer pattern.

Read

ElvixProvider

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.