var Component=(()=>{var d=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),B=(e,n)=>{for(var t in n)a(e,t,{get:n[t],enumerable:!0})},i=(e,n,t,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of u(n))!f.call(e,r)&&r!==t&&a(e,r,{get:()=>n[r],enumerable:!(c=m(n,r))||c.enumerable});return e};var j=(e,n,t)=>(t=e!=null?d(g(e)):{},i(n||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),S=e=>i(a({},"__esModule",{value:!0}),e);var l=x((z,s)=>{s.exports=_jsx_runtime});var _={};B(_,{default:()=>h,frontmatter:()=>k});var o=j(l()),k={id:"beacon",title:"Beacon",package:"@saas-ui-pro/react",description:"A pulsating beacon that attracts attention"};function p(e){let n={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...e.components},{ComponentLinks:t}=n;return t||y("ComponentLinks",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.p,{children:"Beacons allows you to direct an users attention to parts of your application. For example to indicate there's a new update available."}),` `,(0,o.jsx)(t,{pro:{gumroad:!0}}),` `,(0,o.jsx)(n.h2,{children:"Import"}),` `,(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:`import { Beacon } from '@saas-ui-pro/react' `})}),` `,(0,o.jsx)(n.h2,{children:"Usage"}),` `,(0,o.jsx)(n.h3,{children:"Basic"}),` `,(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,o.jsx)(n.h3,{children:"Color scheme"}),` `,(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:` `})}),` `,(0,o.jsx)(n.h3,{children:"Sizes"}),` `,(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:`import { Stack } from '@chakra-ui/react' export default function Sizes() { return ( ) } `})}),` `,(0,o.jsx)(n.h3,{children:"With Button"}),` `,(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-jsx",children:`import { Button } from '@chakra-ui/react' import { Beacon } from '@saas-ui-pro/react' export default function WithButton() { return ( ) } `})})]})}function h(e={}){let{wrapper:n}=e.components||{};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function y(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(_);})(); ;return Component;

Beacon

Props