# Buttons

It's possible to add custom coded buttons to Shopstory. Custom buttons are a special kind of custom components. The differences from standard components are:

1. You can connect actions to the buttons.
2. Buttons can be used as links.
3. Only buttons can be added to button groups.

## How to make my custom Button compatible with Shoptory?

Custom Button is compatible with Shopstory when it satisfies following conditions.

#### It  understands `as` property

The custom buttons will be compatible with Shopstory **only** when they properly interpret `as` property. There are 3 possible values for `as`:

1. `as="button"` - you must display your button as a semantic `<button>`.
2. `as="a"` - you must display your button as `<a>` (so it's not a button in a semantic meaning, only visual)
3. `as=undefined` - no action connected to button. You should leave it as `<button>` or `<div>.`

#### Pass onClick, href, target, etc.

All standard `a` or `button` properties like `onClick`, `href`, `target`, etc must be passed to the underlying DOM `button` or `a` elements.

**Understands `label` property**

Custom buttons have a built-in `label` property.&#x20;

## Example

Below you can see a properly defined custom coded Shopstory button:

```typescript
import React from "react";
import { ShopstoryButton } from "@shopstory/core/types";
import css from "./Button.module.css";

export type ButtonProps = {
  variant: "dark" | "light" | "dark-outline" | "light-outline"
}

export const Button : ShopstoryButton<ButtonProps> = (props) => {
  const { as, variant, ...restProps } = props;

  let extraClass = "";
  if (variant === "light") {
    extraClass = css["Button--light"];
  } else if (variant === "dark-outline") {
    extraClass = css["Button--outline"];
  } else if (variant === "light-outline") {
    extraClass = css["Button--light-outline"]
  }

  return React.createElement(as ?? "div", { ...restProps, className: `${css.Button} ${extraClass}` }, props.label)
}
```

We register buttons in the config using `buttons` property:

```typescript
export const shopstoryConfig: Config = {
    // ...
  buttons: [
    {
      id: "Button",
      label: "Demo Button",
      schema: [
        {
          prop: "variant",
          label: "Variant",
          type: "select",
          options: [
            "dark", "light", "dark-outline", "light-outline"
          ]
        }
      ]
    }
  ],
}
```

As with components, we must pass the component instance to `ShopstoryProvider` :

```typescript
import { ShopstoryProvider } from "@shopstory/core/react";
import { CustomComponent } from "../components/CustomComponent/CustomComponent";
import {Button} from "../components/Button/Button";

export const DemoShopstoryProvider : React.FC = ({ children }) => {
  return <ShopstoryProvider
    components={{
      CustomComponent
    }}
    buttons={{
      Button
    }}
  >
    { children }
  </ShopstoryProvider>
}
```

Let's see our button in action:

{% embed url="<https://vimeo.com/779578375>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shopstory.app/custom-code/buttons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.