import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  Playground,
  DoSimple,
  DoDanger,
  DoSmall,
  DoIconStart,
  DoIconEnd,
  DoSubmit,
  DontLongLabel,
  DoShortLabel,
  DontMultiplePrimary,
  DoOnePrimary,
  DontTooManyIcons,
  DoOneIcon,
  DontGenericLabel,
  DoSpecificLabel,
  DontPrimaryForCancel,
  DoPrimaryForSave,
} from '../../components/button/BmsButton.stories.js';

<Meta title="Documentation/Buttons/Primary" />

# <img src="./BmsIcon.png" /> Primary Button

The primary button should represent the main action on a screen. There should only be one primary button on an interface. If multiple actions are possible, it is essential to create a hierarchy of actions and use a primary and several secondary or tertiary buttons.

## Anatomy

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

![](./button/PrimaryButtonRepresentation.png)

## Component

Use the controls below to interact with the component and see how it behaves with different configurations.

<Canvas of={Playground} />

### Props

<Controls of={Playground} />

## Usage Examples

### ✅ Do: Simple action button

Use a clear, concise label (maximum 3 words) for the primary action.

<Canvas of={DoSimple} />

### ✅ Do: Button with icon at start

Icons can help clarify the action. Place them at the start of the button.

<Canvas of={DoIconStart} />

### ✅ Do: Button with icon at end

Place icons at the end for navigation or forward actions.

<Canvas of={DoIconEnd} />

### ✅ Do: Submit button

Use `submit` prop for form submissions.

<Canvas of={DoSubmit} />

### ✅ Do: Danger mode

Use danger mode for destructive actions that require caution.

<Canvas of={DoDanger} />

### ✅ Do: Small variant

Use the small variant when space is limited.

<Canvas of={DoSmall} />

## Rules

### ⛔ Don't: Long labels

Avoid long labels that exceed 3 words. Keep button text concise and action-oriented.

**❌ Don't:**

<Canvas of={DontLongLabel} />

**✅ Do:**

<Canvas of={DoShortLabel} />

### ⛔ Don't: Multiple primary buttons

Never use multiple primary buttons on the same screen. Use only one primary button per interface.

**❌ Don't:**

<Canvas of={DontMultiplePrimary} />

**✅ Do:**

<Canvas of={DoOnePrimary} />

### ⛔ Don't: Overuse of icons

Don't overload buttons with multiple icons or decorative elements that don't add value.

**❌ Don't:**

<Canvas of={DontTooManyIcons} />

**✅ Do:**

<Canvas of={DoOneIcon} />

### ⛔ Don't: Generic labels

Avoid generic labels like "Click here" or "Submit". Use specific action verbs.

**❌ Don't:**

<Canvas of={DontGenericLabel} />

**✅ Do:**

<Canvas of={DoSpecificLabel} />

### ⛔ Don't: Primary for secondary actions

Don't use primary buttons for secondary or cancel actions. Reserve primary buttons for the main action.

**❌ Don't:**

<Canvas of={DontPrimaryForCancel} />

**✅ Do:**

<Canvas of={DoPrimaryForSave} />
