import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Badge</Title>

    The Badge component is a visual indicator that can be added to various elements within a user interface.
    It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.

    <Subtitle>Usage</Subtitle>

    When using the Badge component, it is important to follow these user experience best practices:

    - **Use sparingly:** While the Badge component can be effective in drawing attention to important information, it should not be overused. Overuse of the Badge component can lead to a cluttered and confusing user interface.
    - **Be consistent:** When using the Badge component, ensure that it is used consistently throughout the user interface. This includes the placement, size, and color of the Badge component.
    - **Keep it simple:** The Badge component should be simple and easy to understand. Avoid using overly complicated designs or messaging.
    - **Avoid using too many colors:** While the Badge component can be colored to draw attention, it is important to avoid using too many colors. This can lead to a visually overwhelming user interface.
    - **Make it accessible:** Ensure that the Badge component is accessible to all users, including those with visual impairments. This can be achieved by using appropriate color contrast and providing alternative text descriptions.

    <Subtitle>👍 When to use</Subtitle>

    The Badge component can be used in a variety of situations, including:

    - **Alerts and notifications:** Use the Badge component to draw attention to important alerts or notifications, such as new messages or updates.
    - **Status indicators:** Use the Badge component to indicate the status of an item, such as whether it is new, in progress, or completed.
    - **Counters:** Use the Badge component to display a count of items, such as the number of unread messages or pending tasks.

    <Title>Properties</Title>

    <ArgTypes of="bq-badge" />
  </div>
</div>
