<template>
  <div class="badges" style="text-align: center;">
    <fd-container flex>
      <fd-col>
        <fd-badge>Default</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge type="success">Success</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge type="warning">Warning</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge type="error">Error</fd-badge>
      </fd-col>
    </fd-container>

    <fd-container flex>
      <fd-col>
        <fd-badge filled>Default</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge filled type="success">Success</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge filled type="warning">Warning</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge filled type="error">Error</fd-badge>
      </fd-col>
    </fd-container>

    <fd-container flex>
      <fd-col>
        <fd-badge pill>Default</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge pill type="success">Success</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge pill type="warning">Warning</fd-badge>
      </fd-col>
      <fd-col>
        <fd-badge pill type="error">Error</fd-badge>
      </fd-col>
    </fd-container>
  </div>
</template>
