buttons

📢 Use this project, contribute to it

Buttons

Under the app's name, you should explain the topic, giving a brief description of its functionality in a store when installed.

Next, add media (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice.

Media Placeholder

Configuration

In this section, you first must add the primary instructions that will allow users to use the app's blocks in their store, such as:

1. Adding the app as a theme dependency in the manifest.json file;

2. Declaring the app's main block in a given theme template or inside another block from the theme.

Block name	Description
button.copy	A button that copies a specified text to the clipboard when clicked.

button.copy Props

Prop Name	Type	Description	Default Value
copyText	string	The text that will be copied to the clipboard	''
label	string	The label text displayed on the copy button	Copy
copiedLabel	string	The label text displayed on the copy button after it's been clicked and text has been copied to clipboard	'Copied!'
copiedResetStateTimeout	number	The time in milliseconds before the copy button label is reset after being clicked and text has been copied to clipboard	1500

Usage

{
  "button.copy": {
    "props": {
      "copyText": "Example text to copy",
      "label": "Copy to clipboard",
      "copiedLabel": "Copied!",
      "copiedResetStateTimeout": 2000
    }
  }
}

block-2 props

Prop name	Type	Description	Default value
XXXXX	XXXXXX	XXXXXXXX	XXXXXX

Prop types are:

• string

• enum

• number

• boolean

• object

• array

When documenting a prop whose type is object or array another prop table will be needed. You can create it following the example below:

• propName object:

Prop name	Type	Description	Default value
XXXXX	XXXXXX	XXXXXXXX	XXXXXX

Remember to also use this Configuration section to showcase any necessary disclaimer related to the app and its blocks, such as the different behavior it may display during its configuration.

Modus Operandi (not mandatory)

There are scenarios in which an app can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these behavioral changes in this section, allowing users to fully understand the practical application of the app in their store.

If you feel compelled to give further details about the app, such as it's relationship with the VTEX admin, don't hesitate to use this section.

Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

CSS Handles
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX

If there are none, add the following sentence instead:

No CSS Handles are available yet for the app customization.

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!

---

Check out some documentation models that are already live:

• Breadcrumb

• Image

• Condition Layout

• Add To Cart Button

• Store Form