docs/components/navigation/SuggestionChips

SuggestionChips

Horizontal chip row for suggestions.

import { SuggestionChips } from '@ybouhjira/hyperkit';

Static examples

This component depends on app-level context (providers, services, or interactive setup) that does not fit the inline playground yet, so its examples are shown as static code.

#Props

PropTypeDefaultDescription
chips *SuggestionChip[]Array of suggestion chips to display.
onSelect *(chip: SuggestionChip) => voidCallback when a chip is clicked.
classstringAdditional CSS classes.

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-accent
  • --sk-bg-secondary
  • --sk-bg-tertiary
  • --sk-border
  • --sk-border-strong
  • --sk-duration-fast
  • --sk-font-size-base
  • --sk-icon-md
  • --sk-radius-md
  • --sk-space-md
  • --sk-space-sm
  • --sk-text-primary
  • --sk-text-secondary