Beacon

A pulsating beacon that attracts attention

Beacons allows you to direct an users attention to parts of your application. For example to indicate there's a new update available.

Import#

import { Beacon } from '@saas-ui/pro'

Usage#

Basic#

<Beacon />

Color scheme#

<Beacon colorScheme="primary" />

Sizes#

<Stack spacing="4">
  <Beacon size="xs" colorScheme="primary" />
  <Beacon size="sm" colorScheme="cyan" />
  <Beacon size="md" colorScheme="blue" />
  <Beacon size="lg" />
</Stack>

With Button#

<Button position="relative">
  Changelog{' '}
  <Beacon
    size="sm"
    colorScheme="primary"
    position="absolute"
    top="0"
    right="0"
  />
</Button>

Was this helpful?