Float Bar — ARC UI

Components

Float Bar

layout

interactive

<arc-float-bar>

Overview

Guidelines

When to use

Use for bulk-action bars that appear when items are selected in a table or list
Use for unsaved-changes prompts at the bottom of forms
Keep the content concise: a status message plus 2-3 action buttons
Dismiss the Float Bar automatically when the triggering condition resolves (e.g., selection cleared)
Combine with Button components for clear primary/secondary action hierarchy
Use position="bottom" for most cases; position="top" for cookie/consent banners

When not to use

Do not use Float Bar for permanent toolbars — use Toolbar instead
Do not put navigation links in a Float Bar — use Top Bar or Dock
Do not leave the Float Bar open indefinitely — it should be transient and context-dependent
Do not place complex forms or multi-step flows inside a Float Bar
Do not show multiple Float Bars simultaneously at the same position
Do not use as a toast replacement — Float Bar is for actions, Toast is for notifications

Features

Viewport-fixed floating bar with spring easing slide-in animation
Surface-overlay background with backdrop-filter blur for visual layering
Configurable position: bottom (default) or top of the viewport
Controlled via `open` prop — appears in response to application state changes
Fires arc-open and arc-close events for state synchronization
Non-blocking overlay — does not lock body scroll or trap focus
Rounded corners and subtle shadow for floating appearance
CSS part: `bar` for targeted ::part() styling

Preview

Page content behind the float bar

3 items selected

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-float-bar id="bulk-actions" position="bottom">
  <span>3 items selected</span>
  <arc-button variant="secondary" size="sm">Archive</arc-button>
  <arc-button variant="danger" size="sm">Delete</arc-button>
</arc-float-bar>

<script>
  const bar = document.querySelector('#bulk-actions');
  // Show when items are selected
  bar.open = true;
  bar.addEventListener('arc-close', () => console.log('Float bar hidden'));
</script>

import { FloatBar, Button } from '@arclux/arc-ui-react';

function BulkActions({ selectedCount }: { selectedCount: number }) {
  return (
    <FloatBar open={selectedCount > 0} position="bottom">
      <span>{selectedCount} items selected</span>
      <Button variant="secondary" size="sm">Archive</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </FloatBar>
  );
}

<script setup>
import { ref } from 'vue';
import { FloatBar, Button } from '@arclux/arc-ui-vue';

const selectedCount = ref(3);
</script>

<template>
  <FloatBar :open="selectedCount > 0" position="bottom">
    <span>{{ selectedCount }} items selected</span>
    <Button variant="secondary" size="sm">Archive</Button>
    <Button variant="danger" size="sm">Delete</Button>
  </FloatBar>
</template>

<script>
  import { FloatBar, Button } from '@arclux/arc-ui-svelte';

  let selectedCount = $state(3);
</script>

<FloatBar open={selectedCount > 0} position="bottom">
  <span>{selectedCount} items selected</span>
  <Button variant="secondary" size="sm">Archive</Button>
  <Button variant="danger" size="sm">Delete</Button>
</FloatBar>

import { Component } from '@angular/core';
import { FloatBar, Button } from '@arclux/arc-ui-angular';

@Component({
  imports: [FloatBar, Button],
  template: `
    <FloatBar [open]="selectedCount > 0" position="bottom">
      <span>{{ selectedCount }} items selected</span>
      <Button variant="secondary" size="sm">Archive</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </FloatBar>
  `,
})
export class BulkActionsComponent {
  selectedCount = 3;
}

import { createSignal } from 'solid-js';
import { FloatBar, Button } from '@arclux/arc-ui-solid';

function BulkActions() {
  const [selectedCount] = createSignal(3);

  return (
    <FloatBar open={selectedCount() > 0} position="bottom">
      <span>{selectedCount()} items selected</span>
      <Button variant="secondary" size="sm">Archive</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </FloatBar>
  );
}

import { useState } from 'preact/hooks';
import { FloatBar, Button } from '@arclux/arc-ui-preact';

function BulkActions() {
  const [selectedCount] = useState(3);

  return (
    <FloatBar open={selectedCount > 0} position="bottom">
      <span>{selectedCount} items selected</span>
      <Button variant="secondary" size="sm">Archive</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </FloatBar>
  );
}

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls visibility of the float bar. Set to true when a triggering condition is met (e.g., items selected, form dirty) and false when the condition resolves.
`position`	`'bottom' \| 'top'`	`'bottom'`	Which edge of the viewport the float bar appears at. Bottom is standard for bulk-action bars; top works for consent banners or global alerts.

Events

Event	Description
`arc-open`	Fired when the float bar becomes visible after the open prop is set to true.
`arc-close`	Fired when the float bar hides after the open prop is set to false.