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:
12
131. Import it into the single file component (SFC)
142. Add the `<status-icon />` tag
153. Add the optional status prop and set the value to one of the statuses
164. Add the translated text to associate with the icon
17
18```vue
19import StatusIcon from '@/components/Global/StatusIcon'
20```
21
22## Status icon with default status
23
24```vue
25<status-icon />
26```
27
28![StatusIcon default icon example](./secondary.png)
29
30## Status icon with success status
31
32```vue
33<status-icon :status="success" />
34```
35
36![StatusIcon success icon example](./success.png)
37
38## Status icon with info status
39
40```vue
41<status-icon :status="info" />
42```
43
44![StatusIcon info icon example](./info.png)
45
46## Status icon with warning status
47
48```vue
49<status-icon :status="warning" />
50```
51
52![StatusIcon warning icon example](./warning.png)
53
54## Status icon with danger status
55
56```vue
57<status-icon :status="danger" />
58```
59
60![StatusIcon danger icon example](./danger.png)
61
62### Example of AppHeader with status icon
63
64![AppHeader with status icon example](./appHeaderWithStatusIcon.png)
65
66### Example of Event logs with status icon
67
68![EventLogs with status icon example](./eventLogsWithSatusIcon.png)
69