tree: 92be484e7bac4400a961b93a466a6714e61c93ff [path history] [tgz]
  1. appHeaderWithStatusIcon.png
  2. danger.png
  3. eventLogsWithSatusIcon.png
  4. info.png
  5. readme.md
  6. secondary.png
  7. success.png
  8. warning.png
docs/guide/components/status-icon/readme.md

StatusIcon

The StatusIcon component is used to add an icon that represents one of the following statuses:

  • success
  • info
  • warning
  • danger

To use this component:

  1. Import it into the single file component (SFC)
  2. Add the <status-icon /> tag
  3. Add the optional status prop and set the value to one of the statuses
  4. Add the translated text to associate with the icon
import StatusIcon from '@/components/Global/StatusIcon'

Status icon with default status

<status-icon />

StatusIcon default icon example

Status icon with success status

<status-icon :status="success" />

StatusIcon success icon example

Status icon with info status

<status-icon :status="info" />

StatusIcon info icon example

Status icon with warning status

<status-icon :status="warning" />

StatusIcon warning icon example

Status icon with danger status

<status-icon :status="danger" />

StatusIcon danger icon example

Example of AppHeader with status icon

AppHeader with status icon example

Example of Event logs with status icon

EventLogs with status icon example