import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
import { Button } from "./";
import { Flex } from "../../layout/Flex/";

<Meta title="Components/Inputs/Button" component={Button} />

# Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

# Import

```
import { Button } from "@cloudline/cloudline-styled-components"
```

# Usage

<Canvas withSource="open">
  <Story name="Button">
    <Button value="Button" />
  </Story>
</Canvas>

# Button Sizes

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

<Canvas withSource="open">
  <Story name="Button Sizes">
    <Flex justify="space-evenly" align="center">
      <Button size="xs" value="Button" />
      <Button size="sm" value="Button" />
      <Button size="md" value="Button" />
      <Button size="lg" value="Button" />
    </Flex>
  </Story>
</Canvas>

# Button Variants

Use the variant prop to change the visual style of the Button. You can set the value to solid, ghost, outline, or link (still to be styled).

<Canvas withSource="open">
  <Story name="Button Variants">
    <Flex justify="space-evenly" align="center">
      <Button variant="filled" value="Button" />
      <Button variant="outlined" value="Button" />
      <Button variant="ghost" value="Button" />
      <Button variant="link" value="Button" />
    </Flex>
  </Story>
</Canvas>

# Button Colours

Use the variant prop to change the visual style of the Button. You can set the value to solid, ghost, outline, or link (still to be styled).

<Canvas withSource="open">
  <Story name="Button Colours">
    <Flex direction="column" gap={3}>
      <Flex justify="space-evenly" align="center">
        <Button variant="filled" value="Button" success />
        <Button variant="outlined" value="Button" success />
        <Button variant="ghost" value="Button" success />
        <Button variant="link" value="Button" success />
      </Flex>
      <Flex justify="space-evenly" align="center">
        <Button variant="filled" value="Button" warning />
        <Button variant="outlined" value="Button" warning />
        <Button variant="ghost" value="Button" warning />
        <Button variant="link" value="Button" warning />
      </Flex>
      <Flex justify="space-evenly" align="center">
        <Button variant="filled" value="Button" error />
        <Button variant="outlined" value="Button" error />
        <Button variant="ghost" value="Button" error />
        <Button variant="link" value="Button" error />
      </Flex>
    </Flex>
  </Story>
</Canvas>

# Button with icon

<Canvas withSource="open">
  <Story name="Button with icon">
    <Flex justify="space-evenly" align="center">
      <Button value="Prefix" prefix="😆" />
      <Button value="Suffix" suffix="🥲" />
    </Flex>
  </Story>
</Canvas>

# Button loading state

Pass the isLoading prop to show its loading state. The loading state will be shown as a spinner unless a custom loader is also passed.

<Canvas withSource="open">
  <Story name="Button Loading">
    <Flex justify="space-evenly" align="center">
      <Button value="Button" isLoading />
      <Button
        variant="filled"
        value="Button"
        isLoading
        customLoader={<div>Loading Content...</div>}
      />
    </Flex>
  </Story>
</Canvas>

<ArgsTable story="Button" />
