Alert

A note that stands out from the text. Any palette colour tints it, in both modes.

Example

New to React? Start with the installation guide, it covers everything from scratch.

Without a colour the alert is neutral and follows the mode.

Example.jsx

<div className='alert blue'>
  <PiInfo />
  <p><strong>New to React?</strong> Start with the installation guide.</p>
</div>

Add any palette name. The background and the border are mixed from that colour and the page, so the same class reads well in light and dark mode.

The site is built and ready to publish.

The domain is still a placeholder. Run yarn check.

The build failed. Read the first error in the terminal.

Example.jsx

<div className='alert green'>…</div>
<div className='alert yellow'>…</div>
<div className='alert red'>…</div>

Variable	Default	What it sets
`$alert-padding`	`12px 16px`	inner padding
`$alert-gap`	`12px`	space between the icon and the text
`$alert-radius`	`$radius`	corner radius
`$alert-tint`	`8%`	share of the colour in the background
`$alert-edge`	`32%`	share of the colour in the border