SearchPill

Deprecated

307×40 search input with leading magnifier icon. 30px border-radius (pill shape). Border darkens to teal + 4px glow on focus. Used in admin header as the global search. Superseded by herosearch + searchoverlay.

Categorymolecules

Sourcepatterns/molecules/searchpill.html

AI HintUse for grouped UI patterns. Combine atoms into functional units.

Compact search trigger.

SearchPill

Form & Choice — Family 3

Compact search trigger.

Usage

Compact search trigger. Refer to the DS component index for full prop details.

import { SearchPill } from '@epasslive/design-system'

Props

Preview

SearchPill

Prop

Type

Required

Default

Description

placeholder

string

Optional

'admin.search.placeholder'

No description.

value

string

Optional

—

No description.

onSearch

(query: string) => void

Required

—

Debounced 300ms

Quick use:<SearchPill />

Accessibility

ARIA rolesearch

Usage

Import

tsxSnippet

import { SearchPill } from "@epasslive/design-system"

Example 1

tsxSnippet

<SearchPill />

Example 2

tsxSnippet

<SearchPill variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules