docs/components/feedback/LivePulse

LivePulse

Live status pulse indicator.

import { LivePulse } 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
active *booleanWhether the wrapped content represents an active live job.
accentColorstringOverride the accent color used by the border + dot.
hideDotbooleanDisable the corner dot when the visual is too small for it.
classstringAdditional class on the wrapper.
styleJSX.CSSPropertiesInline style on the wrapper.
children *JSX.ElementChildren to wrap.

* 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-primary
  • --sk-livepulse-angle
  • --sk-livepulse-color
  • --sk-livepulse-radius
  • --sk-livepulse-thickness
  • --sk-radius-md