Fields
Button
A link with button styles
Installation
npx shadcn@latest add https://payload-bricks.bblank.dev/r/button-field.jsonUsage
import { buttonField } from "@/fields/button"
import type { Block } from "payload"
export const ExampleBlock: Block = {
slug: "example",
interfaceName: "Example",
fields: [
// your other fields
buttonField,
],
}import { CMSButton } from "@/components/cms-button"
import type { Example } from "@/payload-types"
export function ExampleBlock(props: Example) {
return props.button ? <CMSButton {...props.button} /> : null
}Field structure
| name | type | |
|---|---|---|
link | link field | |
variant | select | default, secondary, outline, link |
size | select | default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg |
Customization
The variant and size values match the variants exported by the shadcn button component. If you change components/ui/button.tsx, make the same change in fields/button-variant.ts or fields/button-size.ts.