Lism CSS
Docs
検索

Alert

短めの文言を目立たせて強調表示したい時に使えるコンポーネントです。

Overview

↓
Preview

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ 
<Alert>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
</Alert>

Styles

Alert のベーススタイルは、以下の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%;
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでAlertとして提供しています。

Import

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

Props

プロパティ 説明
type keycolorとiconの組み合わせのプリセット値を指定できます。初期値:"alert"
icon Iconコンポーネントに渡すアイコンを指定できます。アイコンコンポーネントやSVG文字列を渡せます。既定のアイコンは@lism-css/uiに同梱されています。
keycolor キーカラーを指定します。
flow コンテンツを囲むFlow要素のflowプロパティに渡されます。初期値:"s"
layout レイアウトプリミティブを切り替えます。初期値:"flex"

Examples

カラーとアイコンを指定する例

↓
例

Good / green

import { GoodIcon } from '@lism-css/icons/react';


<Alert icon={GoodIcon} keycolor="green">
  <p>Good / green</p>
</Alert>

l--withSide を使ってレスポンシブ対応

↓
Preview

画面が狭くなるとアイコンとテキストが縦並びになります。

リサイズ 
<Alert type="check" layout="withSide">
  <p>画面が狭くなるとアイコンとテキストが縦並びになります。</p>
</Alert>

ボタン付き + ブレイクポイントによるレスポンシブ対応

↓
Preview

画面が狭くなるとアイコン・テキスト・ボタンが縦並びになります。

Button
リサイズ 
<Alert type="info" fxd={["column","row"]}>
  <Flex ai="center" jc="between" fxd={["column","row"]} g="15">
    <p>画面が狭くなるとアイコン・テキスト・ボタンが縦並びになります。</p>
    <Button href="#" bdrs="10" fxsh="0" fz="s" bgc="link">Button</Button>
  </Flex>
</Alert>

type一覧

↓
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.
リサイズ 
<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

@lism-css/uiを使用せずに、Lism のプリミティブと@lism-css/iconsで Alert を構築するコード例を紹介します。

↓
Preview

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

リサイズ 
import { AlertIcon } from '@lism-css/icons/react';


<WithSide util="cbox" keycolor="red" ai="center" p="15" g="15" bd bdrs="10">
  <Center isSide c="keycolor" fz="xl">
    <Icon icon={AlertIcon} />
  </Center>
  <Flow flow="s">
    <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  </Flow>
</WithSide>

© 2026 Lism CSS.