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