CoreUI PRO Next.js Admin Template

Our Admin Panel isn’t just a mix of third-party components. It’s the only Next.js dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.

Explore Documentation

Get CoreUI PRO →

React Search Button Basic example

CSearchButton is a trigger element for search entry points and command-style actions. It behaves like a regular button on click, and it also reacts to a configurable keyboard shortcut such as meta+/ or ctrl+/. It doesn't manage any panel itself — pair its onTrigger callback with a CModal (or offcanvas) you control via state, as shown below.

React Search Button Custom shortcut

Configure the shortcut with the shortcut prop, a comma-separated list of key combinations. On macOS the component prefers the meta variant for the visual label; on Windows and Linux it prefers the ctrl variant.

Shortcuts such as meta+f, ctrl+f, meta+s, or ctrl+s can override native browser or system shortcuts. Prefer safer combinations such as meta+/ and ctrl+/ unless replacing the default behavior is intentional.

Settings

System Utilization