CommandBar

Command bars provide users with easy access to your app's most common tasks.

CommandBar is built on top of CMDK, by Paco Coursey.

Import

  • CommandBar: The wrapper component provides context and state management.
  • CommandBarDialog: The dialog component.
  • CommandBarContent: The container for the input and list.
  • CommandBarInput: The input field.
  • CommandBarList: The container for the list items.
  • CommandBarGroup: The container for a group of items.
  • CommandBarItem: An item in the list.
  • CommandBarSeparator: A separator between items.
  • CommandBarLoading: The loading content.
  • CommandBarEmpty: The empty content.
import {
CommandBar,
CommandBarContent,
CommandBarInput,
CommandBarList,
CommandBarGroup,
CommandBarItem,
CommandBarSeparator,
CommandBarLoading,
CommandBarEmpty,
} from '@saas-ui/command-bar'

Usage

Basic

import {
CommandBar,
CommandBarContent,
CommandBarInput,
CommandBarList,
CommandBarGroup,
CommandBarItem,
CommandBarSeparator,
CommandBarLoading,
CommandBarEmpty,
} from '@saas-ui/command-bar'
export default function Inline() {
return (
<CommandBar>
<CommandBarContent>
<CommandBarInput placeholder="Type a command or search..." />
<CommandBarList>
<CommandBarEmpty>No results found.</CommandBarEmpty>
<CommandBarGroup heading="Fruits">
<CommandBarItem>Apple</CommandBarItem>
<CommandBarItem>Orange</CommandBarItem>
<CommandBarSeparator />
<CommandBarItem>Pear</CommandBarItem>
<CommandBarItem>Blueberry</CommandBarItem>
</CommandBarGroup>
<CommandBarItem>Fish</CommandBarItem>
</CommandBarList>
</CommandBarContent>
</CommandBar>
)
}

Dialog

import { Button, Box } from '@chakra-ui/react'
import { Command, useHotkeys } from '@saas-ui/react'
import {
CommandBar,
CommandBarDialog,
CommandBarContent,
CommandBarInput,
CommandBarList,
CommandBarGroup,
CommandBarItem,
CommandBarSeparator,
CommandBarLoading,
CommandBarEmpty,
} from '@saas-ui/command-bar'
import {
FiUserCheck,
FiUser,
FiCircle,
FiBarChart,
FiTag,
FiCalendar,
} from 'react-icons/fi'
export default function Dialog() {
const { isOpen, onClose, onToggle } = useDisclosure()
const [isLoading, setLoading] = React.useState(false)
useHotkeys('ctrl+k', () => {
onToggle()
})
return (
<>
<Button onClick={onToggle}>
Open Command Bar <Command ms="2">ctrl+k</Command>
</Button>
<CommandBar
onChange={(value) => console.log(value)}
isOpen={isOpen}
onClose={onClose}
closeOnSelect
>
<CommandBarDialog>
<CommandBarContent>
<CommandBarInput
placeholder="Type a command or search..."
autoFocus
/>
<CommandBarList>
{isLoading && <CommandBarLoading>Hang on…</CommandBarLoading>}
<CommandBarEmpty>No results found.</CommandBarEmpty>
{items.map(({ icon, label, shortcut }) => {
return (
<CommandBarItem key={label} value={label}>
{icon}
{label}
<Command ms="auto">{shortcut}</Command>
</CommandBarItem>
)
})}
</CommandBarList>
</CommandBarContent>
</CommandBarDialog>
</CommandBar>
</>
)
}
const items = [
{
icon: <FiUserCheck />,
label: 'Assign to...',
shortcut: 'A',
},
{
icon: <FiUser />,
label: 'Assign to me',
shortcut: 'I',
},
{
icon: <FiCircle />,
label: 'Change status...',
shortcut: 'S',
},
{
icon: <FiTag />,
label: 'Change labels...',
shortcut: 'L',
},
{
icon: <FiTag />,
label: 'Remove label...',
shortcut: '⇧ L',
},
]

Was this helpful?