---
alias: "fc.button.bar"
aliases:
  - fc.button.bar
category: action
module: Core
---

# fc.button.bar

Horizontal button bar that renders its descendants in a right-aligned row spanning the full width.

## When to Use
- Group multiple action buttons in a right-aligned horizontal bar
- Create a toolbar row at the top or bottom of a section
- Align action buttons consistently across different page layouts

## Key Props

This component has no props. It is a layout wrapper rendered as a full-width `Grid` item with `justify-content: flex-end`.

## Descendants
Yes -- accepts button components or any other action components as children. All descendants are rendered in a right-aligned horizontal row.

## Composition Patterns
- `fc.page.section.header` > `fc.button.bar` > multiple buttons
- `fc.column` > `fc.button.bar` > `fc.drawer.button` + `fc.modal.button`
- `fc.page` > `fc.button.bar` > action buttons at the top of a page

## Gotchas
- Renders as a full-width (`xs={12}`) Grid item -- takes the full row width with content pushed to the right.
- The bar itself has no padding or visual chrome -- it only provides the flex layout.
- Uses `flexDirection: row` and `justifyContent: flex-end` for right-alignment.
- Registered with category `content` in the component registry.

## Manifest Example
```json
{
  "component": "fc.button.bar",
  "descendants": [
    {
      "component": "fc.drawer.button",
      "props": { "label": "Edit Details" }
    },
    {
      "component": "fc.modal.button",
      "props": { "label": "Send Event" }
    }
  ]
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
