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

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

    Buttons are a crucial element of user interface design.
    They allow users to interact with the system and perform actions such as submitting a form, navigating to a new page, or confirming a selection.

    <Subtitle>Usage</Subtitle>

    When using buttons in your user interface design, it's important to follow some best practices to ensure they are effective and user-friendly. Here are some guidelines to keep in mind:

    - Use buttons sparingly to avoid cluttering the interface.
    - Use contrasting colors for the button and text to make them stand out.
    - Use appropriate button types, such as primary, secondary, and tertiary, to indicate the importance of the action.
    - Use icons in addition to text to convey the action of the button.

    <Subtitle> 👍 When to use</Subtitle>

    Buttons should be used for actions that are important for the user to perform, such as submitting a form, navigating to a new page, or confirming a selection.
    **They should not be used for actions that can be performed through other means, such as clicking on a link.**

    <Title>Properties</Title>

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