Actionbar

Installation

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

pnpm exec frontfriend download action-bar -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as UI from "@/components/ui/action-bar";

const Component = UI.ActionBar;

const args = {
  "density": "compact",
  "align": "stretch",
  "maxWidth": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    density?: "relaxed" | "compact";
    align?: "end" | "justify" | "start" | "center" | "stretch";
  };
</script>

<template>
  <div class="h-[150px]">
    <ActionBar v-bind="args"
      ><Button variant="secondary">Cancel</Button
      ><Button>Save changes</Button></ActionBar
    >
  </div>
</template>

Props API

Examples

Default

<script setup lang="ts">
import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as UI from "@/components/ui/action-bar";

const Component = UI.ActionBar;

const args = {
  "density": "compact",
  "align": "stretch",
  "maxWidth": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    density?: "compact" | "relaxed";
    align?: "end" | "justify" | "start" | "center" | "stretch";
  };
</script>

<template>
  <div class="h-[150px]">
    <ActionBar v-bind="args"
      ><Button variant="secondary">Cancel</Button
      ><Button>Save changes</Button></ActionBar
    >
  </div>
</template>

Relaxed

<script setup lang="ts">
import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as UI from "@/components/ui/action-bar";

const Component = UI.ActionBar;

const args = {
  "density": "compact",
  "align": "stretch",
  "maxWidth": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    density?: "compact" | "relaxed";
    align?: "end" | "justify" | "start" | "center" | "stretch";
  };
</script>

<template>
  <div class="h-[150px]">
    <ActionBar density="relaxed" align="end"
      ><Button variant="secondary">Cancel</Button
      ><Button>Save changes</Button></ActionBar
    >
  </div>
</template>

Single Action

<script setup lang="ts">
import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as UI from "@/components/ui/action-bar";

const Component = UI.ActionBar;

const args = {
  "density": "compact",
  "align": "stretch",
  "maxWidth": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    density?: "compact" | "relaxed";
    align?: "end" | "justify" | "start" | "center" | "stretch";
  };
</script>

<template>
  <div class="h-[150px]">
    <ActionBar align="end"><Button>Confirm</Button></ActionBar>
  </div>
</template>

Max Width

<script setup lang="ts">
import { ActionBar } from "@/components/ui/action-bar";
import { Button } from "@/components/ui/button";
import * as UI from "@/components/ui/action-bar";

const Component = UI.ActionBar;

const args = {
  "density": "compact",
  "align": "stretch",
  "maxWidth": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    density?: "compact" | "relaxed";
    align?: "end" | "justify" | "start" | "center" | "stretch";
  };
</script>

<template>
  <div class="h-[150px]">
    <ActionBar :max-width="true" align="justify"
      ><Button variant="secondary">Back</Button
      ><Button variant="destructive">Delete</Button
      ><Button>Save changes</Button></ActionBar
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

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