StatusDropdown

A compact interactive status tag that opens a menu to change the current status. Cross-platform (web and native).

Installation

npm install @xsolla/xui-status-dropdown

Imports

import { StatusDropdown } from '@xsolla/xui-status-dropdown';
import type { StatusDropdownProps, StatusDropdownPalette } from '@xsolla/xui-status-dropdown';
import { ContextMenuItem } from '@xsolla/xui-context-menu';

Also re-exported from the @xsolla/xui-controls meta-package:

import { StatusDropdown } from '@xsolla/xui-controls';

Quick start

const [status, setStatus] = useState('Success');

<StatusDropdown label={status} palette="Success" dot>
  <ContextMenuItem onPress={() => setStatus('Success')}>Success</ContextMenuItem>
  <ContextMenuItem onPress={() => setStatus('Warning')}>Warning</ContextMenuItem>
  <ContextMenuItem onPress={() => setStatus('Alert')}>Alert</ContextMenuItem>
</StatusDropdown>;

API Reference

<StatusDropdown>

| Prop | Type | Default | Description | | --- | --- | --- | --- | | label | string | — | Current status text shown on the trigger. | | palette | 'Neutral' \| 'Success' \| 'Warning' \| 'Alert' \| 'Brand' | 'Neutral' | Colour palette for the trigger. | | dot | boolean | false | Show a small status dot before the label. | | children | ReactNode | — | Menu content; typically ContextMenuItem elements. | | onSelect | (value: any) => void | — | Fired when a menu item is selected. | | isOpen | boolean | — | Controlled open state. | | onOpenChange | (isOpen: boolean) => void | — | Fires when the open state changes. | | aria-label | string | `Status: ${label}` | Accessible label for the trigger. | | id | string | — | HTML id on the underlying dropdown. | | testID | string | — | Test identifier; suffixed for inner trigger and dot. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Types

type StatusDropdownPalette = 'Neutral' | 'Success' | 'Warning' | 'Alert' | 'Brand';

Examples

Controlled selection

Item-level onPress handlers on each ContextMenuItem drive the controlled value; this is the recommended pattern.

const STATUSES = [
  { label: 'Success', palette: 'Success' },
  { label: 'Warning', palette: 'Warning' },
  { label: 'Alert', palette: 'Alert' },
  { label: 'Neutral', palette: 'Neutral' },
  { label: 'Brand', palette: 'Brand' },
] as const;

const [current, setCurrent] = useState(STATUSES[0]);

<StatusDropdown label={current.label} palette={current.palette} dot>
  {STATUSES.map((s) => (
    <ContextMenuItem key={s.label} onPress={() => setCurrent(s)}>
      {s.label}
    </ContextMenuItem>
  ))}
</StatusDropdown>

Without dot

<StatusDropdown label="Warning" palette="Warning">
  <ContextMenuItem>Success</ContextMenuItem>
  <ContextMenuItem>Warning</ContextMenuItem>
</StatusDropdown>

Accessibility

• Trigger renders with role="button" and aria-haspopup="listbox".
• An aria-label is auto-generated from label when not supplied.
• Menu open state is communicated through the underlying Dropdown; chevron rotates with the open state.