Skip to main content
Context GrammarContext-aware AI

Search button

A quiet button that ends with the shortcut it answers to. It presses like Button; the shortcut chip is the Kbd component.

Controls

Code

import { SearchButton } from "@/components/ui/kit/ui";

<SearchButton label="Search" combo="⌘K" />

Every state

Default

Hover

Focus

Active

Disabled

Kbd

⌘K

Usage

Do

  • Show the shortcut that really opens search on the reader’s platform.

Don’t

  • Don’t use it for anything except opening search.

Tokens it uses

Tokens it uses
--surface…
--line-2…
--line-strong…
--muted…
--ink…
--font-label…
--font-data…
--dur-instant…

Values are read live from the stylesheet, so they follow the site theme.