# AppActionBar

The top action/button toolbar for management **list** pages. Two house dividers wrap a
`space-between` Row so the Create / Refresh / Delete toolbar reads identically across every
module — you only supply the buttons.

## Install

Copy `AppActionBar.tsx` into your module:

```
src/components/common/AppActionBar.tsx
```

Requires `antd` (already a dependency in every RVN React MFE).

## Usage

```tsx
import AppActionBar from '@/components/common/AppActionBar';
import { Button } from 'antd';

<AppActionBar>
  <Button size="small" onClick={handleCreate}>Create</Button>
  <Button size="small" danger disabled={!selected.length} onClick={handleDelete}>Delete</Button>
</AppActionBar>
```

- Place it **immediately after** `AppBreadcrumb` and **before** `AppSearchBar`.
- For a left/right split, wrap each group in its own `<Space>` — `space-between` pushes them apart.
- Pass `justify="start"` to anchor all buttons left.

## Do / Don't

- **Don't** add another `<Divider>` right before or after it — the component already renders both
  (the `mt-0 mb-0` / `mt-0 mb-2` margins are the spacing contract).
- **Do** keep buttons `size="small"`.

Part of the **RVN Design Kit** — design-kit.raffles.com.vn