<div class="sky-padding-even-large">
  <div class="sky-margin-stacked-lg">
    <sky-status-indicator descriptionType="error" indicatorType="danger">
      {{ indicatorText }}
      <sky-help-inline class="sky-control-help" />
    </sky-status-indicator>
    <sky-status-indicator descriptionType="error" indicatorType="info">
      {{ indicatorText }}
      <sky-help-inline class="sky-control-help" />
    </sky-status-indicator>
    <sky-status-indicator
      descriptionType="error"
      indicatorType="success"
      helpPopoverContent="Help!"
    >
      {{ indicatorText }}
    </sky-status-indicator>
    <sky-status-indicator
      descriptionType="error"
      indicatorType="warning"
      helpPopoverContent="Help!"
    >
      {{ indicatorText }}
    </sky-status-indicator>
  </div>
  <button
    class="sky-btn sky-btn-primary"
    type="button"
    (click)="swapIndicatorText()"
  >
    Swap text
  </button>
</div>
