Button

The Button block provides a simple button layout to handle internal and external links that can be resued across your website. It has button_text, button_url and open_in_new_tab fields.

Front End

Content Model

The content model for the Button block is as follows:

button_text: Text Field - Required

button_url: Text Field - Required

open_in_new_tab: Toggle Field - Optional - Default = false

Code

The Button block uses the BlockData type from the Contento JavaScript SDK, the Link component from Next.js.

The open_in_new_tab toggle is used as a conditional variable for the target attribute on the <Link> tag. If the toggle is switched on, it provides a boolean value of true and this will set the target attributes value to _blank so that the link will be opened in a new tab.

import { BlockData } from '@gocontento/client'
import Link from 'next/link'

export default function Button({ button }: { button: BlockData }) {
  return (
    <Link
      href={button.fields.button_url.text}
      className="not-prose my-5 inline-block bg-zinc-700 px-6 py-3 text-white hover:opacity-80"
      target={button.fields.open_in_new_tab.is_on ? '_blank' : ''}
    >
      {button.fields.button_text.text}
    </Link>
  )
}