Lism Tips

Alert（短いお知らせ）

Alert は、短いお知らせをアイコン付きの枠で目立たせる部品です。HTML の形、type ごとの色、Props、並び方を変える例をまとめています。

Alert（アラート）は、短いお知らせを、アイコンと色の付いた枠で目立たせる部品です。@lism-css/ui に入っています。

どんなときに使う？#

  • 「入力にまちがいがあります」「保存しました」のような、短いお知らせを見せるとき
  • 読む人に気づいてほしい短い注意を、本文から浮かせたいとき

見出し付きで、もう少し長い説明を囲みたいときは Callout が向いています。

使い方#

b--alert に l--flex（横に並べる）と u--cbox（色の付いた箱にする）を一緒に付けます。中には、アイコン（a--icon）と、文章を入れる l--flow の箱を置きます。色は変数 --keycolor で決めます。

表示例

入力にまちがいがあります。

html
<div class="b--alert l--flex u--cbox" style="--keycolor: var(--red)">
  <svg class="a--icon" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
  <div class="l--flow -flow:s">
    <p>入力にまちがいがあります。</p>
  </div>
</div>

アイコンは、文章より大きめ（--fz--xl）で、--keycolor の色になります。上の例のアイコンは丸を描いただけの仮のものです。実際には @lism-css/icons などのアイコンを入れます。

色の種類（type）#

React・Astro では type で色とアイコンの組み合わせを選べます。HTML で書くときは、--keycolor に下の色を入れます。

type 色（--keycolor）
alert（初期値） var(--red)
point var(--orange)
warning var(--yellow)
check var(--green)
info var(--blue)
help var(--purple)
note var(--gray)

表示例

check（緑）

info（青）

warning（黄）

html
<div class="l--stack -g:15">
  <div class="b--alert l--flex u--cbox" style="--keycolor: var(--green)">
    <svg class="a--icon" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
    <div class="l--flow -flow:s"><p>check（緑）</p></div>
  </div>
  <div class="b--alert l--flex u--cbox" style="--keycolor: var(--blue)">
    <svg class="a--icon" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
    <div class="l--flow -flow:s"><p>info（青）</p></div>
  </div>
  <div class="b--alert l--flex u--cbox" style="--keycolor: var(--yellow)">
    <svg class="a--icon" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
    <div class="l--flow -flow:s"><p>warning（黄）</p></div>
  </div>
</div>

狭い画面で縦に並べる#

l--flex のかわりに l--withSide を使い、アイコンに is--side を付けます。画面が狭くなると、アイコンと文章が上下に並びます。

表示例

幅が足りなくなると、アイコンの下に文章が回ります。

html
<div class="b--alert l--withSide u--cbox" style="--keycolor: var(--green)">
  <svg class="a--icon is--side" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
  <div class="l--flow -flow:s">
    <p>幅が足りなくなると、アイコンの下に文章が回ります。</p>
  </div>
</div>

-fxd:column -fxd_sm と --fxd_sm: row を付ける方法もあります。-fxd は flex-direction（並ぶ向き）の略です。スマートフォンでは縦、広い画面では横に並びます。

表示例

ボタン付きのお知らせです。

開く
html
<div class="b--alert l--flex u--cbox -fxd:column -fxd_sm" style="--keycolor: var(--blue); --fxd_sm: row">
  <svg class="a--icon" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
  <div class="l--flow -flow:s">
    <div class="l--flex -ai:center -jc:between -fxd:column -fxd_sm -g:15" style="--fxd_sm: row">
      <p>ボタン付きのお知らせです。</p>
      <a class="b--button -hov:-o -bdrs:10 -fxsh:0 -fz:s -bgc" style="--bgc: var(--link)" href="#">開く</a>
    </div>
  </div>
</div>

専用の変数#

変数 意味 初期値
--keycolor アイコンと箱の色 なし（u--cbox と一緒に使う）
--bds 枠線の種類 solid
--bdw 枠線の太さ 1px
--bdc 枠線の色（u--cbox と使うと、そちらの色が優先） var(--divider)

ほかに、すきま var(--s15)・内側の余白 var(--s15)・角丸 var(--bdrs--10) が付きます。

React・Astro で書く場合#

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

<Alert type="check">
  <p>保存しました。</p>
</Alert>

Astro では @lism-css/ui/astro/Alert から読み込みます。

Props 何をするか 初期値
type 色とアイコンの組み合わせを選ぶ "alert"
icon アイコンを変える（アイコンのコンポーネントか SVG の文字列） @lism-css/ui に入っているもの
keycolor 色を決める なし
flow 文章を囲む Flow に渡す flow "s"
layout 並べ方（レイアウトの部品）を変える "flex"

layout="withSide" にすると、上の「狭い画面で縦に並べる」の形になります。アイコンと色を自分で選ぶ例です。

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

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

@lism-css/ui を使わずに作る#

Lism CSS 本体のクラスだけでも、同じような形を作れます。

表示例

本体のクラスだけで作ったお知らせです。

html
<div class="l--withSide u--cbox -ai:center -p:15 -g:15 -bd -bdrs:10" style="--keycolor: var(--red)">
  <div class="l--center is--side -c:keycolor -fz:xl">
    <svg class="a--icon" viewBox="0 0 16 16" width="1em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="8" cy="8" r="7"></circle></svg>
  </div>
  <div class="l--flow -flow:s">
    <p>本体のクラスだけで作ったお知らせです。</p>
  </div>
</div>

関連するページ#

公式ドキュメント

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

ページの一覧