docs/guide/components/status-icon/readme.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

# 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

```vue
import StatusIcon from '@/components/Global/StatusIcon'
```

## Status icon with default status

```vue
<status-icon />
```

![StatusIcon default icon example](./secondary.png)

## Status icon with success status

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

![StatusIcon success icon example](./success.png)

## Status icon with info status

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

![StatusIcon info icon example](./info.png)

## Status icon with warning status

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

![StatusIcon warning icon example](./warning.png)

## Status icon with danger status

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

![StatusIcon danger icon example](./danger.png)

### Example of AppHeader with status icon

![AppHeader with status icon example](./appHeaderWithStatusIcon.png)

### Example of Event logs with status icon

![EventLogs with status icon example](./eventLogsWithSatusIcon.png)