Lism CSS
Docs
Search

Alert

This page is currently under construction
Lism UI (@lism-css/ui) is still in preparation.

Use this component to emphasize short messages.

Overview

↓
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>

Styles

The base styles for Alert are defined in the following CSS.

_style.css 
@layer lism-block {
  /* Note: u--cbox との併用を前提としています。layout="withSide" 指定時は l--withSide がレイアウトを上書きします. */
  .b--alert {
    --bds: solid;
    --bdw: 1px;
    --bdc: var(--divider); /* u--cbox 併用時は u--cbox 側の --bdc が優先される */

    align-items: center;
    gap: var(--s15);
    padding: var(--s15);
    border: var(--bdw) var(--bds) var(--bdc);
    border-radius: var(--bdrs--10);
  }

  .b--alert > .a--icon {
    color: var(--keycolor);
    font-size: var(--fz--xl);
  }

  /* memo: layout="withSide" を考慮し、flex: 1 ではなく width: 100% で本文幅を確保している */
  .b--alert > .l--flow {
    width: 100%;
  }
}

The full source code is available on GitHub.

Usage

Provided as Alert from the @lism-css/ui package.

Import

import { Alert } from '@lism-css/ui/react';

Props

PropDescription
typeSpecifies a preset value combining keycolor and icon. Default: "alert"
iconSpecifies the icon to pass to the Icon component. Preset icons can be specified with just a string.
keycolorSpecifies the key color.
flowPassed to the flow prop of the Flow element that wraps the content. Default: "s"
layoutSwitches the layout primitive. Default: "flex"

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>

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>

© 2026 Lism CSS.