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.
Source
Theme source
@saas-ui/command-bar
- 2.10.0 (latest)
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><CommandBaronChange={(value) => console.log(value)}isOpen={isOpen}onClose={onClose}closeOnSelect><CommandBarDialog><CommandBarContent><CommandBarInputplaceholder="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?