Beacon
DisplayMITPulsing onboarding beacon dot for highlighting new features and call-to-action targets.
bun add @otfdashkit/ui
Preview
BeaconDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { Beacon } from '@otfdashkit/ui'
export function Example() {
return (
<div className="flex items-center gap-4 p-4">
{(['primary', 'success', 'warning', 'error'] as const).map(c => (
<div key={c} className="flex flex-col items-center gap-2">
<Beacon color={c} />
<span className="text-xs capitalize">{c}</span>
</div>
))}
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Beacon source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | ||
| className | string | ||
| color | 'error' | 'primary' | 'success' | 'warning' | 'primary' | |
| size | 'sm' | 'lg' | 'md' | 'md' |