Actionbar

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download action-bar -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return <div className="h-[150px]">{children}</div>;
}
<Frame>
  <ActionBar density="compact" align="stretch">
    <Button variant="secondary">Cancel</Button>
    <Button>Save changes</Button>
  </ActionBar>
</Frame>;

Props API

Examples

Default

import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return <div className="h-[150px]">{children}</div>;
}
<Frame>
  <ActionBar density="compact" align="stretch">
    <Button variant="secondary">Cancel</Button>
    <Button>Save changes</Button>
  </ActionBar>
</Frame>;

Relaxed

import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return <div className="h-[150px]">{children}</div>;
}
<Frame>
  <ActionBar density="relaxed" align="end">
    <Button variant="secondary">Cancel</Button>
    <Button>Save changes</Button>
  </ActionBar>
</Frame>;

Single Action

import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return <div className="h-[150px]">{children}</div>;
}
<Frame>
  <ActionBar align="end">
    <Button>Confirm</Button>
  </ActionBar>
</Frame>;

Max Width

import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as React from "react";
function Frame({ children }: { children: React.ReactNode }) {
  return <div className="h-[150px]">{children}</div>;
}
<Frame>
  <ActionBar maxWidth align="justify">
    <Button variant="secondary">Back</Button>
    <Button variant="destructive">Delete</Button>
    <Button>Save changes</Button>
  </ActionBar>
</Frame>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.