LoginPanel
Auth

LoginPanel

Shared sign-in, sign-out, and step-up card. Provides a consistent card shell, heading, and error tone across Solarius apps.

Component behavior

LoginPanel is method-agnostic. It renders the card shell (brand mark, heading, subtitle, a danger error strip, and a muted footer under the card) and leaves the sign-in method to its children. Put AuthProviderButtons for SSO / OAuth in it, an AuthSeparator between method groups, and the standard Field + Input + Button stack for credentials.

LoginPanelProps extends HTMLAttributes<HTMLDivElement> props
PropTypeDefaultDescription
brandReactNode—Logo mark, centered above the heading.
titleReactNode—Heading text.
subtitleReactNode—Dim line under the heading.
errorReactNode—Error message above the form content.
footerReactNode—Muted line under the card (the 'Create an account' / legal row).
widthnumber380Card width in px.
childrenReactNode—The methods: provider buttons, a credentials form, a separator.

Examples

SSO and credentials together

The most common shape: identity providers on top, a labeled break, then an email + password form. All apps that use LoginPanel render this stack.

LoginPanel
ImportTSX
import {
  LoginPanel,
  AuthProviderButton,
  AuthSeparator,
  Field,
  Input,
  Button,
  Stack,
} from "@solarius/onset";
import {
  IconBrandGoogle,
  IconShieldLock,
  IconMail,
  IconLock,
} from "@tabler/icons-react";

function SignIn() {
  return (
    <LoginPanel
      brand={<Logo />}
      title="Sign in"
      subtitle="Continue to Ledgerline Ops"
    >
      <AuthProviderButton icon={<IconBrandGoogle size={16} />}>
        Continue with Google
      </AuthProviderButton>
      <AuthProviderButton icon={<IconShieldLock size={16} />} meta="SAML">
        Single sign-on
      </AuthProviderButton>

      <AuthSeparator>or continue with email</AuthSeparator>

      <Stack gap="3">
        <Field label="Email" htmlFor="email">
          <Input id="email" type="email" leftIcon={<IconMail size={13} />} />
        </Field>
        <Field label="Password" htmlFor="pw">
          <Input id="pw" type="password" leftIcon={<IconLock size={13} />} />
        </Field>
        <Button variant="primary" fullWidth>
          Sign in
        </Button>
      </Stack>
    </LoginPanel>
  );
}

Error state

Pass any node to error and it renders in the danger tone above the body.

LoginPanel error

Passkey / passwordless

Use a provider button inside LoginPanel for passkey or email-link sign-in.

LoginPanel passkey

Sub-components

AuthProviderButton

A full-width identity-provider button with a fixed leading icon, centered label, and optional trailing meta. Set loading while redirecting to the provider after a click; it swaps the icon for a spinner and disables the button.

AuthProviderButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> props
PropTypeDefaultDescription
iconReactNode—Provider icon content.
loadingboolean—Swaps the icon for a spinner and disables the button.
metaReactNode—Trailing meta tag, e.g. 'SAML' or 'SSO'.
variant"default" | "primary" | "outline""default"Visual weight.
AuthProviderButton

AuthSeparator

A labeled border, such as the "or continue with email" break between an SSO stack and a credentials form. Defaults to "or".

AuthSeparatorProps extends HTMLAttributes<HTMLDivElement> props
PropTypeDefaultDescription
childrenReactNode"or"Centered label between the rules.
or continue with email
AuthSeparator