Action Bar

A floating bar that appears when items are selected, providing contextual actions.

Anatomy

<script>
  import {
    ActionBar,
    ActionBarSelectionTrigger,
    ActionBarSeparator,
    ActionBarCloseButton,
  } from "@saas-ui/svelte/components/action-bar";
</script>

<ActionBar open={true}>
  <ActionBarSelectionTrigger>2 selected</ActionBarSelectionTrigger>
  <ActionBarSeparator />
  <Button variant="outline" size="sm">Delete</Button>
  <ActionBarCloseButton />
</ActionBar>

Examples

Basic Accessibility

Basic ActionBar with ActionBarSelectionTrigger and action buttons.

<Box>
	<Checkbox.Root
		label="Show Action Bar"
		checked={basicOpen}
		onCheckedChange={(e) => (basicOpen = !!e.checked)}
	/>

	<ActionBar open={basicOpen} onOpenChange={(e) => (basicOpen = e.open)}>
		<ActionBarSelectionTrigger>2 selected</ActionBarSelectionTrigger>
		<ActionBarSeparator />
		<Button variant="outline" size="sm">
			<Icon as={Trash} size="sm" />
			Delete
		</Button>
		<Button variant="outline" size="sm">
			<Icon as={ShareNetwork} size="sm" />
			Share
		</Button>
	</ActionBar>
</Box>

Closable Accessibility

ActionBar with ActionBarCloseButton for dismissing.

<Box>
	<Checkbox.Root
		label="Show Action Bar"
		checked={closableOpen}
		onCheckedChange={(e) => (closableOpen = !!e.checked)}
	/>

	<ActionBar
		open={closableOpen}
		onOpenChange={(e) => (closableOpen = e.open)}
	>
		<ActionBarSelectionTrigger>2 selected</ActionBarSelectionTrigger>
		<ActionBarSeparator />
		<Button variant="outline" size="sm">
			<Icon as={Trash} size="sm" />
			Delete
		</Button>
		<Button variant="outline" size="sm">
			<Icon as={ShareNetwork} size="sm" />
			Share
		</Button>
		<ActionBarCloseButton onclick={() => (closableOpen = false)} />
	</ActionBar>
</Box>

Interactive Accessibility

Interactive demo showing action bar responding to checkbox selection.

<Box>
	<VStack gap={3}>
		<Text size="sm" class="text-fg-muted"
			>Selected: {selectedCount} items</Text>
		<HStack gap={2} class="flex-wrap">
			{#each Array(5) as _, i}
				<Checkbox.Root
					label="Item {i + 1}"
					onCheckedChange={(e) => {
						selectedCount += e.checked ? 1 : -1;
					}}
				/>
			{/each}
		</HStack>
	</VStack>

	<ActionBar
		open={selectedCount> 0}
		onOpenChange={(e) => !e.open && (selectedCount = 0)}
	>
		<ActionBarSelectionTrigger>{selectedCount} selected</ActionBarSelectionTrigger>
		<ActionBarSeparator />
		<Button variant="outline" size="sm">
			<Icon as={Trash} size="sm" />
			Delete
		</Button>
		<Button variant="outline" size="sm">
			<Icon as={ShareNetwork} size="sm" />
			Share
		</Button>
		<ActionBarCloseButton onclick={() => (selectedCount = 0)} />
	</ActionBar>
</Box>

Multiple Actions Accessibility

Action bar with multiple actions including destructive actions.

<Box>
	<Checkbox.Root
		label="Show Action Bar"
		checked={multipleActionsOpen}
		onCheckedChange={(e) => (multipleActionsOpen = !!e.checked)}
	/>

	<ActionBar open={multipleActionsOpen}>
		<ActionBarSelectionTrigger>4 selected</ActionBarSelectionTrigger>
		<ActionBarSeparator />
		<Button variant="outline" size="sm">
			<Icon as={FolderPlus} size="sm" />
			Add to collection
		</Button>
		<Button variant="surface" size="sm" colour="red">
			<Icon as={Trash} size="sm" />
			Delete projects
		</Button>
	</ActionBar>
</Box>

Props

ActionBar

The root container component that renders a floating bar at the bottom of the screen.

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the action bar is open/visible.
`onOpenChange`	`(details: { open: boolean }) => void`	`-`	Callback fired when the open state changes.
`closeOnInteractOutside`	`boolean`	`false`	Whether to close the action bar when clicking outside.
`children`	`Snippet`	`-`	Content to render inside the action bar.
`class`	`string`	`-`	Additional CSS classes to apply.

ActionBarSelectionTrigger

A button that displays the selection count or status.

Prop	Type	Default	Description
`children`	`Snippet`	`-`	Content to render inside the trigger (typically 'X selected').
`class`	`string`	`-`	Additional CSS classes to apply.

ActionBarSeparator

A visual separator between action groups.

Prop	Type	Default	Description
`class`	`string`	`-`	Additional CSS classes to apply.

ActionBarCloseButton

A button to dismiss the action bar.

Prop	Type	Default	Description
`aria-label`	`string`	`"Close"`	Accessible label for the close button.
`class`	`string`	`-`	Additional CSS classes to apply.