import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
import {
  PlaygroundSecondary,
  DoSimpleSecondary,
  DoDangerSecondary,
  DoSmallSecondary,
  DoIconStartSecondary,
  DoIconEndSecondary,
  DoSubmitSecondary,
  DontLongLabelSecondary,
  DoShortLabelSecondary,
  DontSecondaryAsPrimary,
  DoSecondaryForCancel,
  DontTooManyIconsSecondary,
  DoOneIconSecondary,
  DontGenericLabelSecondary,
  DoSpecificLabelSecondary,
} from '../../components/button/BmsButton.stories.js';

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

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

The secondary button should represent secondary actions on a screen. They are used alongside primary buttons to create a clear hierarchy of actions. Secondary buttons are ideal for cancel actions, alternative options, or less important actions that don't require primary emphasis.

## 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/CoverSecondaryButton.png)

## Component

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

<Canvas of={PlaygroundSecondary} />

### Props

<Controls of={PlaygroundSecondary} />

## Usage Examples

### ✅ Do: Simple secondary action button

Use a clear, concise label (maximum 3 words) for secondary actions like cancel, back, or alternative options.

<Canvas of={DoSimpleSecondary} />

### ✅ Do: Button with icon at start

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

<Canvas of={DoIconStartSecondary} />

### ✅ Do: Button with icon at end

Place icons at the end for navigation or backward actions.

<Canvas of={DoIconEndSecondary} />

### ✅ Do: Submit button

Use `submit` prop for form submissions when the secondary action is to submit.

<Canvas of={DoSubmitSecondary} />

### ✅ Do: Danger mode

Use danger mode for destructive secondary actions that require caution.

<Canvas of={DoDangerSecondary} />

### ✅ Do: Small variant

Use the small variant when space is limited.

<Canvas of={DoSmallSecondary} />

## Rules

### ⛔ Don't: Long labels

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

**❌ Don't:**

<Canvas of={DontLongLabelSecondary} />

**✅ Do:**

<Canvas of={DoShortLabelSecondary} />

### ⛔ Don't: Use secondary as primary action

Never use secondary buttons for the main action on a screen. Use primary buttons for the most important action.

**❌ Don't:**

<Canvas of={DontSecondaryAsPrimary} />

**✅ Do:**

<Canvas of={DoSecondaryForCancel} />

### ⛔ Don't: Overuse of icons

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

**❌ Don't:**

<Canvas of={DontTooManyIconsSecondary} />

**✅ Do:**

<Canvas of={DoOneIconSecondary} />

### ⛔ Don't: Generic labels

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

**❌ Don't:**

<Canvas of={DontGenericLabelSecondary} />

**✅ Do:**

<Canvas of={DoSpecificLabelSecondary} />
