classroomio/packages/storybook/src/atoms/badge/badge.stories.svelte

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import { Badge } from '@cio/ui/base/badge';

  const { Story } = defineMeta({
    title: 'Atom/Badge',
    component: Badge,
    parameters: {
      layout: 'centered'
    },
    tags: ['autodocs']
  });
</script>

<Story name="Default">
  {#snippet template()}
    <Badge>Default Badge</Badge>
  {/snippet}
</Story>

<Story name="Secondary">
  {#snippet template()}
    <Badge variant="secondary">Secondary</Badge>
  {/snippet}
</Story>

<Story name="Destructive">
  {#snippet template()}
    <Badge variant="destructive">Destructive</Badge>
  {/snippet}
</Story>

<Story name="Warning">
  {#snippet template()}
    <Badge variant="warning">Warning</Badge>
  {/snippet}
</Story>

<Story name="Success">
  {#snippet template()}
    <Badge variant="success">Success</Badge>
  {/snippet}
</Story>

<Story name="Outline">
  {#snippet template()}
    <Badge variant="outline">Outline</Badge>
  {/snippet}
</Story>

<Story name="Multiple Badges">
  {#snippet template()}
    <div class="flex gap-2">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  {/snippet}
</Story>