Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Classic Docs

Styled button link

#Overview

This guide shows how to build a button component that uses dropdown fields for style selection, and contains a toggle button to indicate if the link is external.

This is the type of button you want if the button component is meant to be used in different pages in your project which have different styling options available.

Here, by adding styling option dropdown menus for size and theme, you'll give Editors the possibility to style the buttons using the options you provide.

Dropdowns are great for this, because while they have options, it will only be within a limited selection that ensures the whole project has a cohesive look & feel.

Styled ButtonStyled Button

#Prerequisites

  • You need to have a Hygraph account. If you don't have one, you can sign up here.
  • You need to have a Hygraph project. You can:
    • Create a project: This is the way to go if you want to follow the entire tutorial for learning purposes.
    • Clone the cookbook project: This is the way to go if you're curious about how the buttons are made but don't want to follow the step-by-step creation process. This project contains the entire Buttons Cookbook so you can compare them, or look into what instances they contain.
    • Use an existing project of yours: If you have a project already and want to add this button to it, this is the way to go. In this case, you may need to adjust parts of the tutorial to your own project schema.

#Core concepts

In this guide, you'll work with enumerations, components and basic component fields. Let's look into these concepts:

  • Enumerations: an enumeration is a predefined set of values that represents a list of possible options. You can use them to group values within a type.

  • Component: a pre-defined set of fields that can be reused across models and content entries. You can think of a component as a flexible, reusable template: you define the fields that will be used inside a component once, and then fill them with different content every time you use it in a content entry.

  • Basic component field: a component is a special field type in your Hygraph schema that defines which components of which type can be used in a model. Component fields can be of basic or modular types. A basic component field can only have one component attached to it. You can limit the number of component instances to one, or allow multiple component instances to be added in the content entry.

#What you can do

This guide offers two paths:

  • Path 1: Use this guide to create a styled button component that you can reuse across different models in your Hygraph projects.
  • Path 2: Clone the project that contains the entire Buttons cookbook to compare the different button configurations without having to clone multiple projects.

#Clone project

We have prepared a project that contains the entire Buttons cookbook:

Clone this project

This cookbook contains all the recipes we have so far to create buttons, so you can compare the different button configurations without having to clone multiple projects.

To find this particular recipe in the cookbook project, navigate to the schema and look for "Styled button link".

This project also contains a demo model that includes all the button components as basic components, as well as a modular component that you can use as a button type selector.

#Step-by-step guide

Before we can build components, we sometimes need to create other schema elements that will later be added to those components as instances.

To make this guide easier to follow, we've divided it in steps for you.

#1. Create the enumerations

We will start by creating the enumerations that we can later add to our components as dropdown menus for the button style options.

We'll start with the "Theme" enumeration. We'll navigate to our project schema and click +Add next to Enumerations.

We'll use the following information:

FieldInput
Display NameButton theme
API IDButtonTheme

Next, we need to add enumeration values. These are the options we will get when using this later as a dropdown menu. For this example, we'll use two theme options - light and dark.

For every enumeration value, we need to enter a Display name, an API ID, and click Add.

We'll add the following values:

Display nameAPI ID
Lightlight
Darkdark

Finally, we'll click Add enumeration to save.

Now that our button theme enumeration has been created, we'll do the same for our button size enumeration.

We'll use the following information to create the enumeration:

FieldInput
Display NameButton size
API IDButtonSize

Next, we need to add the following enumeration values in the same way we added values to the previous enumeration:

Display nameAPI ID
Largelarge
Mediummedium
Smallsmall

Finally, we'll click Add enumeration to save.

#2. Create the component

Now that we've created the enumerations that we're going to use later, we can build our styled button component. To do this, we'll click +Add next to Components.

The first step is to create the component itself. We'll use the following information:

FieldInput
Display NameStyled button link
API IDStyledButtonLink
API ID PluralStyledButtonLinks

We'll click Add component to save. We can now start adding instances to this component.

Let's start with a Single line text field, which will be our button label. We'll find it on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
SettingsDisplay NameLabel
SettingsAPI IDlabel
SettingsUse as title field checkboxLeave this checkbox selected
ValidationsMake this field required checkboxSelect this checkbox

We'll click Add to save.

We'll add one more Single line text field where we can later add our URL as a string:

TabFieldInput
SettingsDisplay NameLink
SettingsAPI IDlink
ValidationsMake this field required checkboxSelect this checkbox

We'll click Add to save.

We want to add a Boolean field that we can toggle to indicate whether the link is external. We'll use the following information:

TabFieldInput
SettingsDisplay NameIs external
SettingsAPI IDisExternal

We'll click Add to save.

Next, we'll add an Enumeration field, which will be one of our dropdown menus. Once again, we'll find it on the Add fields right sidebar, click on it, and use the following information:

TabFieldInput
SettingsDisplay NameTheme
SettingsAPI IDtheme
SettingsEnumerationSelect "Button theme" from the dropdown menu

We'll click Add to save.

Finally, we'll add one more Enumeration field, for the button size:

TabFieldInput
SettingsDisplay NameSize
SettingsAPI IDsize
SettingsEnumerationSelect "Button size" from the dropdown menu

We'll click Add to save.

We've created a button component that contains a button label and a link, has a toggle to indicate whether the button link is external or not, and has two dropdown menus to let you select a button theme and size.

Styled ButtonStyled Button

Since this is a component, you can reuse it throughout your project wherever it is needed, without having to recreate it every time!

This guide helped you create the schema element yourself. Alternatively, you can clone a project containing all our button recipes.

Check out the next document section for that!