Toolbar with Select

Rendering Select as a ToolbarItem inside a Toolbar.

Open preview in a new tab
Edit withViteNext.js
import "./style.css";
import { useState } from "react";
import * as Ariakit from "@ariakit/react";
import * as icons from "./icons.jsx";
const options = [
{ value: "Align Left", icon: icons.alignLeft },
{ value: "Align Center", icon: icons.alignCenter },
{ value: "Align Right", icon: icons.alignRight },
export default function Example() {
const [value, setValue] = useState("Align Left");
const selectedIcon = options.find((option) => option.value === value)?.icon;
return (
<Ariakit.Toolbar className="toolbar">
<Ariakit.ToolbarItem className="button secondary">
{icons.bold} Bold
<Ariakit.ToolbarItem className="button secondary">
{icons.italic} Italic
<Ariakit.ToolbarItem className="button secondary">
{icons.underline} Underline
<Ariakit.ToolbarSeparator className="separator" />
<Ariakit.SelectProvider value={value} setValue={setValue}>
aria-label="Text alignment"
className="button secondary"
render={<Ariakit.ToolbarItem />}
{selectedIcon} {value} <Ariakit.SelectArrow />
<Ariakit.SelectPopover gutter={4} className="popover">
{ => (
{option.icon} {option.value}


Composing Select and ToolbarItem

In this example, we use the render prop to combine Select and ToolbarItem into a single element:

<Select render={<ToolbarItem />}>

You can learn more about this pattern on the Composition guide.

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.

Read latest issue

No Spam. Unsubscribe at any time.