ActionBar
Use ActionBar for actions that apply to selected content. It stays pinned while the page scrolls.
Source
LLM docs
Package
Examples
5
Properties
42
Basics
Open the bar when selection is active; CloseButton calls
onClose.Loading demo…
import { useState } from 'react';
import { ActionBar, Block, Button, Text } from '@plocks/ui';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Block fullWidth>
<Button onPress={() => setOpened(true)}>Select items</Button>
<ActionBar opened={opened} onClose={() => setOpened(false)}>
<Text>3 selected</Text>
<ActionBar.Divider />
<Button size="sm">Delete</Button>
<ActionBar.CloseButton />
</ActionBar>
</Block>
);
}Placement and Escape
Use logical viewport insets to place the bar and
closeOnEscape to dismiss it with Escape.Loading demo…
import { useState } from 'react';
import { ActionBar, Block, Button, Text } from '@plocks/ui';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Block fullWidth>
<Button onPress={() => setOpened(true)}>Show top bar</Button>
<ActionBar
opened={opened}
onClose={() => setOpened(false)}
position={{ top: 24, end: 24 }}
transition="slide-up"
closeOnEscape
>
<Text>Top end</Text>
<ActionBar.CloseButton />
</ActionBar>
</Block>
);
}Icon Buttons
IconButton actions can be grouped with dividers and tooltips.
Loading demo…
import { useState } from 'react';
import { ActionBar, Block, Button, IconButton, Tooltip } from '@plocks/ui';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Block fullWidth>
<Button onPress={() => setOpened(true)}>Show actions</Button>
<ActionBar opened={opened} onClose={() => setOpened(false)}>
<Tooltip label="Archive">
<IconButton icon="archive" accessibilityLabel="Archive" variant="ghost" />
</Tooltip>
<ActionBar.Divider />
<Tooltip label="Delete">
<IconButton icon="trash" accessibilityLabel="Delete" variant="ghost" />
</Tooltip>
<ActionBar.CloseButton />
</ActionBar>
</Block>
);
}Transitions
transition changes how the bar enters and leaves.Loading demo…
import { useState } from 'react';
import { ActionBar, Block, Button, Text } from '@plocks/ui';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Block fullWidth>
<Button onPress={() => setOpened(true)}>Show slide transition</Button>
<ActionBar
opened={opened}
onClose={() => setOpened(false)}
transition="slide-up"
transitionDuration={300}
>
<Text>Sliding actions</Text>
<ActionBar.CloseButton />
</ActionBar>
</Block>
);
}Keep Mounted
keepMounted preserves child state while the bar is hidden.Loading demo…
import { useState } from 'react';
import { ActionBar, Block, Button, Checkbox } from '@plocks/ui';
export function Demo() {
const [opened, setOpened] = useState(false);
return (
<Block fullWidth>
<Button onPress={() => setOpened((value) => !value)}>Toggle bar</Button>
<ActionBar opened={opened} onClose={() => setOpened(false)} keepMounted>
<Checkbox label="Keep this choice" />
</ActionBar>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources