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.
- Beta
Buy Pro
- 0.35.5 (latest)
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{' '}<Beaconsize="sm"colorScheme="primary"position="absolute"top="0"right="0"/></Button>)}
Was this helpful?