Alert.
Information that should stay visible.
LIVE PREVIEWTry it. It works.
Changes saved
Your project is up to date.
Review your settings
Some changes need your attention.
Usage
<Alert title="Changes saved" tone="success">The project is up to date.</Alert>Import components from @bld8/ui and include @bld8/ui/styles.css once. Wrap the application in UIProvider.
API & behaviour
tone: neutral | success | warning | danger. Set live only for dynamically inserted messages: danger uses role=alert, other tones use role=status.
Notes to self
Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.