Vuetify: status‐label (StatusLabelComponent) - bcgov/healthgateway GitHub Wiki

General

StatusLabelComponent has been made more generic and renamed to DisplayFieldComponent.

  • Swap <status-label> for <DisplayFieldComponent>.
    • Add name="Status" prop.
    • Swap status="X" prop for value="X".
    • Swap variant="success" prop for value-class="text-success".
    • Swap variant="danger" prop for value-class="text-error".

Example Code

<DisplayFieldComponent
    name="Status"
    value="Verified"
    value-class="text-success"
    data-testid="emailStatusVerified"
/>
<DisplayFieldComponent
    name="Status"
    value="Opted Out"
    value-class="text-medium-emphasis"
    data-testid="emailStatusOptedOut"
/>
<DisplayFieldComponent
    name="Status"
    value="Not Verified"
    value-class="text-error"
    data-testid="emailStatusNotVerified"
/>

Example Output

image