QuickActions

Overview

18 exports9 variant axes32 props4 files

import { QuickActionItemLayout, QuickActions, QuickActionsLayout } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Grid layout

Default layout. Use columns to control density; items stay readable on narrow screens.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"
import { RiFileAddLine, RiUserAddLine, RiUploadCloud2Line } from "@remixicon/react"

export function Example() {
  return (
    <QuickActions label="Quick actions" columns={2}>
      <QuickActionItem
        icon={<Icon icon={RiFileAddLine} />}
        tone="primary"
        description="Create a draft invoice"
      >
        New invoice
      </QuickActionItem>
      <QuickActionItem
        icon={<Icon icon={RiUserAddLine} />}
        tone="feature"
        description="Send an invite link"
      >
        Invite member
      </QuickActionItem>
      <QuickActionItem
        icon={<Icon icon={RiUploadCloud2Line} />}
        tone="success"
        description="Attach a PDF or image"
      >
        Upload file
      </QuickActionItem>
    </QuickActions>
  )
}

With title & action

Optional heading above the group, plus a trailing control (e.g. See all).

Get started

import { QuickActions, QuickActionItem, Icon, Button } from "@nili/ui"

export function Example() {
  return (
    <QuickActions
      title="Get started"
      action={<Button appearance="ghost" size="sm">See all</Button>}
      columns={2}
    >
      <QuickActionItem icon={<Icon icon={RiFileAddLine} />} tone="primary">
        New invoice
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUserAddLine} />} tone="feature">
        Invite member
      </QuickActionItem>
    </QuickActions>
  )
}

Appearances

Card (default), tile, ghost and list. Pick the weight that matches the surrounding surface.

card

tile

ghost

list

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={2}>
      <QuickActionItem appearance="card" icon={<Icon icon={RiFileAddLine} />}>
        Card
      </QuickActionItem>
      <QuickActionItem appearance="tile" icon={<Icon icon={RiUserAddLine} />}>
        Tile
      </QuickActionItem>
      <QuickActionItem appearance="ghost" icon={<Icon icon={RiSettings3Line} />}>
        Ghost
      </QuickActionItem>
      <QuickActionItem appearance="list" icon={<Icon icon={RiShareForwardLine} />}>
        List
      </QuickActionItem>
    </QuickActions>
  )
}

Icon tones

Colour of the icon chip. Neutral is the default; use semantic tones for meaning.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={3}>
      <QuickActionItem icon={<Icon icon={RiFileAddLine} />} tone="primary">
        Primary
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUserAddLine} />} tone="success">
        Success
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiSettings3Line} />} tone="error">
        Error
      </QuickActionItem>
    </QuickActions>
  )
}

Vertical tiles

Icon over label — the square tile pattern used on phone home screens and empty states.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={4}>
      <QuickActionItem
        layout="vertical"
        appearance="tile"
        icon={<Icon icon={RiFileAddLine} />}
        tone="primary"
      >
        Invoice
      </QuickActionItem>
      <QuickActionItem
        layout="vertical"
        appearance="tile"
        icon={<Icon icon={RiUserAddLine} />}
        tone="feature"
      >
        Invite
      </QuickActionItem>
    </QuickActions>
  )
}

Row layout

Horizontal scroll instead of wrap — keeps the shortcut row to a single line on narrow screens.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions layout="row" label="Shortcuts">
      <QuickActionItem icon={<Icon icon={RiFileAddLine} />} tone="primary">
        New invoice
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUserAddLine} />} tone="feature">
        Invite
      </QuickActionItem>
      <QuickActionItem icon={<Icon icon={RiUploadCloud2Line} />} tone="success">
        Upload
      </QuickActionItem>
    </QuickActions>
  )
}

List with shortcut

Flat list items with keyboard hints — useful inside command palettes or menus.

import { QuickActions, QuickActionItem, Icon } from "@nili/ui"

export function Example() {
  return (
    <QuickActions columns={1}>
      <QuickActionItem
        appearance="list"
        icon={<Icon icon={RiFileAddLine} />}
        shortcut="⌘N"
      >
        New invoice
      </QuickActionItem>
      <QuickActionItem
        appearance="list"
        icon={<Icon icon={RiUserAddLine} />}
        shortcut="⌘I"
        active
      >
        Invite member
      </QuickActionItem>
    </QuickActions>
  )
}

Footer

Command-palette footer: keyboard hints on the left, a Help Center link on the right. Compose it under a list of QuickActionItems — it is not a separate export.

to navigateto select

Not what you're looking for? Help Center

import { QuickActions, QuickActionItem, Icon, LinkButton } from "@nili/ui"
import {
  RiFileAddLine,
  RiUserAddLine,
  RiArrowUpLine,
  RiArrowDownLine,
  RiCornerDownLeftLine,
} from "@remixicon/react"

export function Example() {
  return (
    <div className="overflow-hidden rounded-xl border border-soft-200 bg-white-0">
      <QuickActions columns={1} className="p-1">
        <QuickActionItem
          appearance="list"
          icon={<Icon icon={RiFileAddLine} />}
          shortcut="⌘N"
        >
          New invoice
        </QuickActionItem>
        <QuickActionItem
          appearance="list"
          icon={<Icon icon={RiUserAddLine} />}
          shortcut="⌘I"
        >
          Invite member
        </QuickActionItem>
      </QuickActions>

      <div className="flex flex-wrap items-center justify-between gap-3 border-t border-soft-200 px-4 py-3 text-[12px] leading-4 text-sub-600">
        <div className="flex flex-wrap items-center gap-4">
          <span className="flex items-center gap-1">
            <kbd className="flex size-5 items-center justify-center rounded-md border border-soft-200 bg-weak-50">
              <Icon icon={RiArrowUpLine} />
            </kbd>
            <kbd className="flex size-5 items-center justify-center rounded-md border border-soft-200 bg-weak-50">
              <Icon icon={RiArrowDownLine} />
            </kbd>
            to navigate
          </span>
          <span className="flex items-center gap-1">
            <kbd className="flex size-5 items-center justify-center rounded-md border border-soft-200 bg-weak-50">
              <Icon icon={RiCornerDownLeftLine} />
            </kbd>
            to select
          </span>
        </div>
        <span>
          Not what you&apos;re looking for?{" "}
          <LinkButton color="primary" size="sm" underline href="#">
            Help Center
          </LinkButton>
        </span>
      </div>
    </div>
  )
}

QuickActionDescription

internal

QuickActionIcon

internal

Variant axes — from the component’s cva definition

Prop	Type	Default	Notes
tone	neutral \| primary \| information \| success \| warning \| error \| feature \| away \| verified	neutral
size	sm \| md	md

QuickActionItem

extends Omit< ComponentPropsWithoutRef<'button'>, 'children' | 'title' >

Variant axes — from the component’s cva definition

Prop	Type	Default	Notes
appearance	card \| tile \| ghost \| list	card
layout	horizontal \| vertical	horizontal
size	sm \| md	md
active	boolean	false	Marks the shortcut as the one in effect: adds `aria-pressed`.

Other props

Prop	Type	Default	Notes
children	ReactNode	—
disabled	boolean	—
required	boolean	—
readOnly	boolean	—
value	string	—
defaultValue	string	—
name	string	—
aria-label	string	—
tone	error \| warning \| success \| feature \| verified \| away \| primary \| neutral \| information	neutral	Colour of the icon chip.
icon	ReactNode	—	The glyph. Wrapped in a tinted chip unless `iconWrapper={false}`.
iconWrapper	boolean	true	Set `false` to drop the tinted chip and render the glyph bare.
sublabel	ReactNode	—	Figma `💬 Sublabel` — muted text on the label's line.
description	ReactNode	—	Second line under the label.
badge	ReactNode	—	Figma `🎖️ Badge` — beside the label.
shortcut	ReactNode	—	Keyboard hint at the trailing edge, e.g. `'⌘N'`.
endAdornment	ReactNode	—	Anything at the trailing edge — a Badge, a count, a chevron.
asChild	boolean	false	Render the child element instead of a `<button>` — for router links.

QuickActionLabel

internal

Variant axes — from the component’s cva definition

Prop	Type	Default	Notes
size	sm \| md	md

QuickActionShortcut

internal

QuickActions

extends Omit< ComponentPropsWithoutRef<'div'>, 'title' >

Variant axes — from the component’s cva definition

Prop	Type	Default	Notes
layout	grid \| row	grid
size	sm \| md	md

Other props

Prop	Type	Default	Notes
children	ReactNode	—
aria-label	string	—
columns	number	2	Columns, when `layout="grid"`. A number is applied at every width; pass a Tailwind class through `className` instead if you need it responsive.
label	string	—	Accessible name for the group, e.g. `'Quick actions'`.
title	ReactNode	—	Optional heading rendered above the group; also names it.
action	ReactNode	—	Trailing control beside the title — "See all", a menu.