Float Bar
Viewport-bottom floating toolbar with surface-overlay background, backdrop blur, and spring easing. For bulk actions, unsaved-changes prompts.
<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 FloatBar 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 FloatBar for permanent toolbars — use Toolbar instead
- Do not put navigation links in a FloatBar — use TopBar or Dock
- Do not leave the FloatBar open indefinitely — it should be transient and context-dependent
- Do not place complex forms or multi-step flows inside a FloatBar
- Do not show multiple Float Bars simultaneously at the same position
- Do not use as a toast replacement — FloatBar 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
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="secondary" 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="secondary" 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="secondary" 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="secondary" size="sm">Delete</Button>
</FloatBar>import { Component } from '@angular/core';
import { FloatBar, Button } from '@arclux/arc-ui-angular';
@Component({
imports: [FloatBar, Button],
template: `
<arc-float-bar [open]="selectedCount > 0" position="bottom">
<span>{{ selectedCount }} items selected</span>
<arc-button variant="secondary" size="sm">Archive</arc-button>
<arc-button variant="secondary" size="sm">Delete</arc-button>
</arc-float-bar>
`,
})
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="secondary" 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="secondary" size="sm">Delete</Button>
</FloatBar>
);
}API
-
openbooleanfalse - 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
-
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.