@mozaic-ds/vue/src/components/badge/MBadge.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3';
import MBadge from './MBadge.vue';

const meta: Meta<typeof MBadge> = {
  title: 'Indicators/Badge (number)',
  component: MBadge,
  parameters: {
    docs: {
      description: {
        component:
          'A Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
      },
    },
  },
  args: { label: 99 },
  render: (args) => ({
    components: { MBadge },
    setup() {
      return { args };
    },
    template: `
      <MBadge v-bind="args"></MBadge>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MBadge>;

export const Standard: Story = {};

export const Accent: Story = {
  args: { appearance: 'accent' },
};

export const Danger: Story = {
  args: { appearance: 'danger' },
};

export const Inverse: Story = {
  parameters: {
    backgrounds: {
      default: 'Inverse',
    },
  },
  args: { appearance: 'inverse' },
};

export const Size: Story = {
  args: { size: 'm' },
};