InlineStatusSelect

InlineStatusSelect lets users change item status in place without opening a full edit form.

#Default usage

<InlineStatusSelect
  status="review"
  statuses={[
    { value: "draft", label: "Draft" },
    { value: "review", label: "Needs review", tone: "warning" },
    { value: "published", label: "Published", tone: "success" },
    { value: "blocked", label: "Blocked", tone: "error" },
  ]}
/>

#Import

import { InlineStatusSelect } from "@froggdesign/enter-ui-react";

#Patterns

Use InlineStatusSelect in tables, review queues, issue cards, content lists, and workflow dashboards where status changes are frequent and low-risk.

#Accessibility

The trigger is a labelled button and the menu uses DropdownMenu keyboard behavior. Status color is supported by visible text and never used as the only signal.

#API

• status: current status value.
• statuses: { value, label, tone? }[].
• onStatusChange: called with the selected status value.
• disabled: disables the trigger.

#Styling

InlineStatusSelect uses .eui-inline-status-select classes and FroggDesign tokens for layout, state, focus, and disabled styling.