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/react'

Usage

Basic

<Beacon />

Color scheme

<Beacon colorScheme="primary" />

Sizes

import { Stack } from '@chakra-ui/react'
export default function Sizes() {
return (
<Stack spacing="4">
<Beacon size="xs" colorScheme="primary" />
<Beacon size="sm" colorScheme="cyan" />
<Beacon size="md" colorScheme="blue" />
<Beacon size="lg" />
</Stack>
)
}

With Button

import { Button } from '@chakra-ui/react'
import { Beacon } from '@saas-ui-pro/react'
export default function WithButton() {
return (
<Button position="relative">
Changelog{' '}
<Beacon
size="sm"
colorScheme="primary"
position="absolute"
top="0"
right="0"
/>
</Button>
)
}

Was this helpful?