Button

Installation

You can add the pre-configured button elements to your project with the command below. If you only want to install the button block check the reference here.

npx @basepl/cli add BaseplButton

Currently, basepl doesn't automatically update the payload types. So if you install the configuration and the component you have to update the types. Simply run

npm generate:types

If not you will get an error in the blocks/BaseplButton/Component.tsx file. Because the BaseplButtonType is not present.

Button block configuration

Here is the result in the admin panel and the pre-configured button block itself. You can change it to your needs in the blocks/BaseplButton/config.ts file.

PreviewCode

Button component configuration - optional

Per default the block will be installed with prebuild and fully customizable components. To only install the button block read more here.

The basepl button act as a wrapper for the shadcn button component, to apply admin configurations. You can change it ether to your needs in the blocks/BaseplButton/Component.tsx file or in the components/ui/button.tsx file.

If you want to find out more about the button styling variants and configuration options, take a look at the documentation at shadcn docs.

Predefined button options

You can choose between different button options. Options for styling match the available shadcn button configurations.

Icons

If you want to use an additional icon, you have the possibility to check the checkbox and do an upload with the icon of your choice or refer to one from the media collection.

Variants

In the admin panel, you can choose between different variants using the select within the styling options.

Sizes

You can choose between different sizes via the select dropdown within the styling options.

Link options

To read more about the link field, check the options here.