Alert
This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.
Use this component to emphasize short messages.
↓
Preview
Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.
Resize
<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. |
layout | Switches the layout primitive. Default: "flex" |
Source Code
The source code is available on GitHub.
Examples
Custom Color and Icon
↓
Example
icon=“good” keycolor=“green”
<Alert icon="good" keycolor="green"> <p>icon="good" keycolor="green"</p></Alert>Responsive Layout with l--withSide
↓
Preview
On narrow screens, the icon and text stack vertically.
Resize
<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
↓
Preview
On narrow screens, the icon, text, and button stack vertically.
Button Resize
<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
↓
Preview
On narrow screens, the icon and text stack vertically.
Resize
<Alert layout="withSide"> <p>On narrow screens, the icon and text stack vertically.</p></Alert>Available Types
↓
Specifying type
type=“alert”: Example text.
type=“point”: Example text.
type=“warning”: Example text.
type=“check”: Example text.
type=“info”: Example text.
type=“help”: Example text.
type=“note”: Example text.
Resize
<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.
↓
Preview
Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.
Resize
<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>