1# StatusIcon
2
3The StatusIcon component is used to add an icon that represents one of the
4following statuses:
5
6- success
7- info
8- warning
9- danger
10
11To use this component:
121. Import it into the single file component (SFC)
132. Add the `<status-icon />` tag
143. Add the optional status prop and set the value to one of the statuses
154. Add the translated text to associate with the icon
16
17```vue
18import StatusIcon from '@/components/Global/StatusIcon'
19```
20
21## Status icon with default status
22
23```vue
24<status-icon />
25```
26
27![StatusIcon default icon example](./secondary.png)
28
29## Status icon with success status
30
31```vue
32<status-icon
33:status="success"
34/>
35```
36
37![StatusIcon success icon example](./success.png)
38
39## Status icon with info status
40
41```vue
42<status-icon
43:status="info"
44/>
45```
46
47![StatusIcon info icon example](./info.png)
48
49## Status icon with warning status
50
51```vue
52<status-icon
53:status="warning"
54/>
55```
56
57![StatusIcon warning icon example](./warning.png)
58
59## Status icon with danger status
60
61```vue
62<status-icon
63:status="danger"
64/>
65```
66
67![StatusIcon danger icon example](./danger.png)
68
69### Example of AppHeader with status icon
70
71![AppHeader with status icon example](./appHeaderWithStatusIcon.png)
72
73### Example of Event logs with status icon
74
75![EventLogs with status icon example](./eventLogsWithSatusIcon.png)
76