# Search Button
Bootstrap Search Button for CoreUI is a keyboard-aware trigger component that can open search interfaces, modals, offcanvas panels, and custom flows from click or shortcut.
## Overview
The CoreUI **Bootstrap Search Button component** is a trigger element designed for search entry points and command-style actions. It behaves like a regular button on click, but it can also react to a configurable keyboard shortcut such as `meta+/` or `ctrl+/`.
- Use it as a standalone trigger for a custom search UI.
- Combine it with `data-coreui-toggle` and `data-coreui-target` to open a modal or offcanvas.
- Shortcut keys are rendered automatically.
- Displayed shortcut keys react to keyboard interaction and receive an `.active` state while pressed.
## Basic example
Use `.search-button` together with `data-coreui-search-button`. The keyboard shortcut keys are generated automatically by JavaScript. Because the component dispatches a real `click()` when the configured shortcut matches, it works with CoreUI data APIs such as modal, offcanvas, or collapse triggers.
```html
```
```html
```
## Custom shortcut
Configure the shortcut with `data-coreui-shortcut`. 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.
```html
```
```html
```
## Launch an offcanvas
Because the component dispatches a real `click()` when the configured shortcut matches, it works with CoreUI data APIs such as modal, offcanvas, or collapse triggers. This demo uses `meta+shift+o` / `ctrl+shift+o` to avoid colliding with other live examples on the page.
```html
Search panel
Use this space for filters, recent searches, or command shortcuts.
```
```html
Search panel
Use this space for filters, recent searches, or command shortcuts.
```
## Keyboard behavior
### When the configured shortcut is pressed
| Key | Action |
| --- | --- |
| `Enter` / `Space` on a focused search button | Trigger the same action as a pointer click |
| Configured shortcut, e.g. `⌘/` / `Ctrl+/` | Trigger the same action as a pointer click |
| Modifier key inside the visible shortcut | Add `.active` to the corresponding `.search-button-key` while pressed |
| Final key inside the visible shortcut | Add `.active` to the corresponding `.search-button-key` while pressed |
### Keyboard state behavior
| Interaction | Effect |
| --- | --- |
| Matching shortcut on `keydown` | Optionally prevents the browser's default behavior and dispatches the component trigger |
| Plain typing inside `input`, `textarea`, `select`, or `contenteditable` | Does not trigger the component without `meta` or `ctrl` |
| `keyup` after a shortcut key press | Removes `.active` from the rendered shortcut keys |
| Browser window `blur` | Clears all active shortcut key states |
| Multiple configured shortcuts | The component listens to all configured shortcuts and renders the platform-preferred one in the UI |
## Accessibility
Accessibility is an important part of the Search Button design. The component includes built-in behaviors that help preserve expected keyboard interaction and reduce conflicts with assistive technologies, but accessible results still depend on choosing the right markup and shortcut combinations.
### Built-in accessibility behavior
- Native button semantics are preserved when the component is used on a `