> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Customization

> How to customize the text in the StytchB2B Login component

export const isReact_0 = undefined

<Warning>String customization is not supported for admin portal components</Warning>

The Stytch B2B SDK allows you to customize the text in the prebuilt UI through the strings parameter. This feature supports both one-off customizations for specific text changes and comprehensive localization efforts for supporting multiple languages.

Text customization requires version 5.25.0, 19.6.0, and/or 21.6.0 or higher of the `@stytch/vanilla-js`, `@stytch/react`, and/or `@stytch/nextjs` packages, respectively.

## ICU MessageFormat

All customizable strings use [ICU MessageFormat](https://unicode-org.github.io/icu/userguide/format%5Fparse/messages/).

## Available Strings

To see all available strings that can be customized, navigate to the Stytch package in your `node_modules` and locate the file at:

```bash theme={null}
node_modules/@stytch/vanilla-js/messages/b2b/en.po
node_modules/@stytch/nextjs/messages/b2b/en.po
node_modules/@stytch/react/messages/b2b/en.po
```

This file contains all the default English strings used throughout the B2B SDK and their corresponding keys.

## Basic Usage

Pass your custom strings to the StytchB2B component:

{isReact_0 ? (
<CodeBlock language="jsx">{`
const customStrings = {
  "formField.email.label": "Work Email Address",
  "login.title": "Welcome Back!",
};

<StytchB2B
  config={{
    products: [B2BProducts.emailMagicLinks, B2BProducts.oauth, B2BProducts.passwords],
    emailMagicLinksOptions: {
      loginRedirectURL: "http://localhost:3000/dashboard",
      loginExpirationMinutes: 60,
    },
  }}
  strings={customStrings}
/>`}
</CodeBlock>
) : (
<CodeBlock language="js">{`
const customStrings = {
  "formField.email.label": "Work Email Address",
  "login.title": "Welcome Back!",
};

document.getElementById('stytch-ui').strings = customStrings;`}
</CodeBlock>
)}

## TypeScript

Types for the `strings` prop is available as the `Strings` types from version v5.43.0, v19.17.0 and/or v21.17.0 of the `@stytch/vanilla-js`, `@stytch/react`, and/or `@stytch/nextjs` packages, respectively.

The type is a `Partial` since we recommend only including strings you intend to override, but you use `Required<Strings>` if you are doing a complete localization and intend to translate every string.

## Localization

For complete localization, you can override all strings, then conditionally display the correct string based on the user's locale:

```jsx theme={null}
const spanishStrings = {
  "login.title": "Regístrate o inicia sesión",
  // ... rest of strings
};

<StytchB2B
  config={{
    products: [B2BProducts.emailMagicLinks, B2BProducts.oauth, B2BProducts.passwords],
    emailMagicLinksOptions: {
      loginRedirectURL: "http://localhost:3000/dashboard",
      loginExpirationMinutes: 60,
    },
  }}
  // If not provided, the default English strings will be used
  strings={locale === "es" ? spanishStrings : {}}
/>
```

## Dynamic Content Handling

Some strings include dynamic content, such as the Organization name or email address. You can use ICU MessageFormat to format these strings dynamically.

```jsx theme={null}
/*
  Value in the en.po file:
  msgid "organizationLogin.title"
  msgstr "Continue to {organizationName}"
*/

const strings = {
  "organizationLogin.title": "Proceed to {organizationName}",
};
```

Additionally, some strings include special components as part of the string. You can use these components to customize the text inside the component.

```jsx theme={null}
/*
  Value in the en.po file:
  msgid "password.reset.emailSent.resendText"
  msgstr "Didn't get it? <resendButton>Resend email</resendButton>"
*/

const strings = {
  "password.reset.emailSent.resendText":
    "Didn't receive the email? <resendButton>Retry</resendButton>",
};
```