Alert
Use this component to emphasize short messages.
Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.
<Alert> <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p></Alert>Usage
Import Alert from the @lism-css/ui package.
Import
import { Alert } from '@lism-css/ui/react';Props
| Prop | Description |
|---|---|
|type| Specifies a keyword that sets a combination of keycolor and icon. Default: "alert" |
|icon| Specifies the icon to pass to the Icon component. |
|keycolor| Specifies the key color. |
|flow| Passed to the flow prop of the Flow element that wraps the content. Default: "s" |
|layout| Switches the layout primitive. Default: "flex" |
Source Code
The source code is available on GitHub.
Examples
Custom Color and Icon
icon=“good” keycolor=“green”
<Alert icon="good" keycolor="green"> <p>icon="good" keycolor="green"</p></Alert>Responsive Layout with l--withSide
On narrow screens, the icon and text stack vertically.
<Alert type="check" layout="withSide"> <p>On narrow screens, the icon and text stack vertically.</p></Alert>Alert with a Button and Breakpoint-Responsive Layout
On narrow screens, the icon, text, and button stack vertically.
Button<Alert type="info" fxd={["column","row"]}> <Flex ai="center" jc="between" fxd={["column","row"]} g="15"> <p>On narrow screens, the icon, text, and button stack vertically.</p> <Button href="#" bdrs="10" fxsh="0" fz="s" bgc="link">Button</Button> </Flex></Alert>l--withSide Responsive Layout
On narrow screens, the icon and text stack vertically.
<Alert layout="withSide"> <p>On narrow screens, the icon and text stack vertically.</p></Alert>Available Types
<Alert type="alert">...</Alert><Alert type="point">...</Alert><Alert type="warning">...</Alert><Alert type="check">...</Alert><Alert type="info">...</Alert><Alert type="help">...</Alert><Alert type="note">...</Alert>Without @lism-css/ui
This example builds the Alert with lism-css primitives only, without @lism-css/ui.
Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.
<WithSide util="cbox" keycolor="red" ai="center" p="15" g="15" bd bdrs="10"> <Center isSide c="keycolor" fz="xl"> <Icon icon="alert" /> </Center> <Flow flow="s"> <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p> </Flow></WithSide>