StatusLabel

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import styled, { css } from 'styled-components'
import { Cluster, Stack } from '../Layout'
import { StatusLabel } from './StatusLabel'
export default {
title: 'States(状態)/StatusLabel',
component: StatusLabel,
parameters: {
withTheming: true,
},
}
export const All: Story = () => (
<Wrapper>
<Stack gap={0.5}>
<dt>色の種類</dt>
<Cluster as="dd">
<StatusLabel>ラベル名</StatusLabel>
<StatusLabel type="blue">ラベル名</StatusLabel>
<StatusLabel type="green">ラベル名</StatusLabel>
<StatusLabel type="red">ラベル名</StatusLabel>
</Cluster>
</Stack>
<Stack gap={0.5}>
<dt>色の種類とその強調</dt>
<Cluster as="dd">
<StatusLabel bold>ラベル名</StatusLabel>
<StatusLabel type="blue" bold>
ラベル名
</StatusLabel>
<StatusLabel type="green" bold>
ラベル名
</StatusLabel>
<StatusLabel type="red" bold>
ラベル名
</StatusLabel>
</Cluster>
</Stack>
<Stack gap={0.5}>
<dt>特殊状態</dt>
<Cluster as="dd">
<StatusLabel type="warning">警告</StatusLabel>
<StatusLabel type="error">エラー</StatusLabel>
</Cluster>
</Stack>
<Stack gap={0.5}>
<dt>特殊状態の強調</dt>
<Cluster as="dd">
<StatusLabel type="warning" bold>
警告
</StatusLabel>
<StatusLabel type="error" bold>
エラー
</StatusLabel>
</Cluster>
</Stack>
</Wrapper>
)
All.storyName = 'all'
const Wrapper = styled(Stack).attrs({ as: 'dl', gap: 1.5 })`
${({ theme: { spacingByChar } }) => css`
margin-block: unset;
padding: ${spacingByChar(1.5)};
dd {
margin-inline-start: unset;
}
`}
`
処理中

種類

特殊なステータスを表す場合は、背景色に警告色やエラー色を使います。
その他のステータスを表す場合は、プロダクトに応じて適宜色を選択します。

すべての人が同じように色を認識できるわけではありません。
色のみでステータスを伝えることは避け、ライティングを参考に適切な名前を付けましょう。 (参考:カラーユニバーサルデザイン

状態

強調の有無

他のステータスと区別して、視覚的に目立たせたい場合は、背景色と文字色を反転させた「強調あり」のラベルを使います。
例えばユーザーがアクションをしないと次に進めない場合などに使います。

ライティング

ラベル名は、ユーザーに「タスクの進捗状況」や「要求されているアクション」を伝えることを意識して命名しましょう。

タスクの開始前

最初のステータスです。
まだ最初のアクションが完了していないことを明確にしましょう。

  • ○○前:タスクを進めるためにアクションが必要だが、ユーザーがまだ何もアクションをしていない状態(例:開始前)
  • 未○○:ユーザーが最初のアクションの一部に着手している状態(例:未送信 = 送信先の従業員を追加したが、送信はしていない)

タスクの開始後〜未完了

2つ目以降のステータスです。
どんなアクションが進行中なのか、または次のステータスに移行するまでに何が必要なのかを明確にしましょう。

  • ○○中:アクションが進行している途中の状態(例:依頼準備中、入力中、回答中)
  • ○○待ち:ユーザーがアクションをした後、システムや他の従業員による後続のアクションを待っている状態(例:提出待ち、承認待ち)

タスクの完了後

最後のステータス、または一部のサブタスクが終わった場合のステータスです。
どんなタスクが終わったのかを明確にしましょう。

  • ○○済み:すべてのタスクが終わるまでに複数のサブタスクが存在し、一部のサブタスクが終わった状態(例:設定済み、提出済み)
  • 完了○○完了:すべてのタスクが終わっている状態。なお、○○済みと併用する場合は「完了」を使うこと
  • 終了○○終了:対応期限が過ぎて、アクションが打ち切られている状態(例:回答終了)

問題発生時

問題が発生した場合のステータスです。
処理が失敗したことや、問題解決のためにアクションが必要なことを明確にしましょう。

  • 差し戻し要○○:ユーザーがアクションを取ったが、管理者などの第三者が確認した結果、不備があったため、やり直しを依頼している状態
  • 失敗○○失敗:ユーザーがアクションを取ったが、不備によりシステムエラーが発生し、処理が完了しなかった状態

Props

type
"error""grey""blue""green""red""warning"

ラベルが表す状態の種類

bold
falsetrue

強調するかどうか

children必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>ReactFragmentReactPortal

ラベル

className
string

コンポーネントに適用するクラス名