# Shadcn Order Type

> Segmented order type selector

- Type: example, free and open source (MIT)
- Component: [Button Group](https://reui.io/components/button-group.md)
- Page: https://reui.io/components/button-group/c-button-group-42
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/button-group.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/button-group.md
- MCP: `get_example("c-button-group-42")`
- Registry item: https://reui.io/r/styles/base-nova/c-button-group-42.json
- Uses: Button, Button Group, Tooltip

## Best for

A trading order type picker for Market, Limit, Stop and Stop Limit, each with an explanatory tooltip

## Agent notes

- `active` only shades the chosen type with `bg-muted`; pass it to your order form

## Install

```bash
npx shadcn@latest add @reui/c-button-group-42
```

## About Shadcn Button Group

### When to use

- Toolbars of related actions joined into one strip, such as editor, media, zoom or export controls
- Split buttons that pair a main action with a chevron menu of its variants, such as Save or Publish
- Segmented pickers and filter bars that join buttons to selects, inputs, counters and status text

### When not to use

- Segmented choices whose pressed option screen readers must hear announced: use [Toggle Group](https://reui.io/components/toggle-group.md) (`get_component("toggle-group")`)
- A text field with an icon, prefix or action drawn inside its own border: use [Input Group](https://reui.io/components/input-group.md) (`get_component("input-group")`)
- A single standalone action, or actions spaced apart with no shared border: use [Button](https://reui.io/components/button.md) (`get_component("button")`)

### Agent notes

- On the base twin only children with a `data-slot` join at the seams, while radix joins every child; wrap custom markup in `ButtonGroupText`
- `ButtonGroup` sets `role` group but no name; pass `aria-label` so screen readers say what the set controls

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.