import { DocsStory, Meta, Canvas } from "@storybook/addon-docs/blocks";

import * as ButtonStories from "./Button.stories";

<Meta of={ButtonStories} />

# Button

Buttons have a simple hierarchy, `primary` or `secondary`, and two sizes, `default` and `s`.

A `Button` can also have a label with a `icon`, an `endIcon` or both:

```tsx
<Button hierarchy="primary">Label</>
<Button hierarchy="secondary" size="s">Label</>
<Button hierarchy="primary" icon="Flash">Label</>
<Button hierarchy="primary" size="s" endIcon="Flash">Label</>
<Button hierarchy="primary" icon="Flash" endIcon="Flash">Label</>
```

To create a `Button` which is just an icon:

```tsx
<Button icon="Flash"/>
<Button icon="User" size="s"/>
```

<DocsStory of={ButtonStories.Primary} />

<DocsStory of={ButtonStories.Secondary} />

## Ghost Mode

Buttons in ghost mode have all the same states as normal buttons, except for their initial state has no background,
outline or box shadow.

```tsx
<Button hierarchy="primary" ghost={true}>Label</>
```

<DocsStory of={ButtonStories.GhostPrimary} />

<DocsStory of={ButtonStories.GhostSecondary} />
