Components

Provider

Sets the language, text direction and motion preference for everything inside it, without changing layout.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Language

locale sets the language of the library’s own strings. The screen reader text of the loading indicator in the example follows the chosen language.

import { Button, Provider } from '@bigbang/ui';

export default function Locale() {
  return (
    <Provider locale="en-GB">
      <Button loading>Primary button</Button>
    </Provider>
  );
}

Text direction

direction="rtl" turns the content right to left. Components use logical properties, so they mirror on their own; icons that follow the reading direction flip too.

import { Button, Icon, Provider } from '@bigbang/ui';

export default function Direction() {
  return (
    <Provider locale="en-GB" direction="rtl">
      <Button variant="secondary" endIcon={<Icon name="arrow-right" size="inherit" />}>
        Secondary button
      </Button>
    </Provider>
  );
}

Reduced motion

reducedMotion="reduce" reduces motion inside, even when the operating system allows it. Pressing the button does not scale it down; the colour change stays.

import { Button, Provider } from '@bigbang/ui';

export default function ReducedMotion() {
  return (
    <Provider locale="en-GB" reducedMotion="reduce">
      <Button>Primary button</Button>
    </Provider>
  );
}

Nested Provider

An inner Provider changes the language for its own area. Motion stays reduced when nested: an inner Provider cannot turn motion back on.

import { Button, Provider } from '@bigbang/ui';

export default function Nested() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-wrap items-center gap-md">
        <Button loading>Primary button</Button>
        <Provider locale="tr-TR">
          <Button loading>Secondary button</Button>
        </Provider>
      </div>
    </Provider>
  );
}

Light and dark mode

Provider draws nothing; in light and dark mode and across brands, the components inside use their own tokens.

import { Button, Provider } from '@bigbang/ui';

export default function Locale() {
  return (
    <Provider locale="en-GB">
      <Button loading>Primary button</Button>
    </Provider>
  );
}