Support us by giving us a

Overview

Design

Expander Crash Course

Part 4. Event Handling

Part 5. Publish a package

Part 6. Polishing UI

Button with shadow

Create rounded border

Create holy-grail layout

Understanding sitemap

Create clean URLs

Using images in documents

How to create a button

Introduction

We are going to create button using `fastn language`.

To make the button we will use the concepts like: - [`components`](https://fastn.com/components). - To the component we will apply various properties with their respective [`built-in types`](/built-in-types/). Some of the `Primitive Types` like `caption`, `string`, `boolean` while others of the `Derived Types` like `ftd.color`, `ftd.shadow`. - We will use [`records`](/record/) as well to define colors for both light and dark mode as well as shadow-color similar to what we have in second button. - We will do `event handling` that gives **shadow** to the button `on-hover`.

Project buildup

Let's start by creating a `component` and we will call it `button`. The syntax is:

-- component button:

-- end: button

Lang:

ftd

We will give the basic properties to this component like, `title` and `link`. - `title` is of `caption` type. - `link` is of `string` type. You can also make the link as `optional`, if you do not want to add any link to it.

-- component button:
caption title:
optional string link:

-- end: button

Lang:

ftd

First, let's create one basic button. Inside this component we will add `ftd.text` that will take the title, a link and apply the border property to it.

-- ftd.text: $button.title
link: $button.link
border-width.px: 2

Lang:

ftd

The dollars used here is for reference that the value in the caption of `ftd.text` will come from component button's title and same for link. This will do. We can use this component to show the button. We have a basic button ready.

Let's move to the second part where we start putting things together to make this UI. Let's start applying some styling properties to the `ftd.text`

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
padding.px: 10
border-radius.px: 6
min-width.fixed.px: 175
style: bold
text-align: center

Lang:

ftd

After that, we will give `color` and `role` to the text. For that, in the component definition we have added a variable `text-color` of type `ftd.color`. We can give a default value using `$inherited.colors` to this variable. In case, the user doesn't pass any text-color, while calling this component, it will take the inherited color from the color-scheme.

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong


-- end: button

Lang:

ftd

And in the `ftd.text`, we will pass the reference of text-color to the color. And for the `role` we have passed as `$inherited.type.copy-regular`

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6
padding.px: 10
min-width.fixed.px: 175
style: bold
color: $button.text-color
role: $inherited.types.copy-regular

Lang:

ftd

`role` is a font specification which defines several font-related properties like `font-weight`, `line-height`, `letter-spacing` etc. If you want to read about roles you can checkout the `ftd.responsive-type` under `built-in types`. The URL provided in the description below. Let's keep improving it. We need background color and border color as well.

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong

Lang:

ftd

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6
padding.px: 10
min-width.fixed.px: 175
text-align: center
style: bold
color: $button.text-color
role: $inherited.types.copy-regular
background.solid: $button.bg-color
border-color: $button.border-color

Lang:

ftd

Since we are trying to copy the colors of this UI. I have created the custom color variables like:

-- ftd.color monochrome-dark:
light: black
dark: white

-- ftd.color monochrome-light:
light: white
dark: black

-- ftd.color shadow-color:
light: #cae9ee
dark: #e4b0ac

Lang:

ftd

These variables are of record type `ftd.color`. You can check the URL of records to read about them. Let's add the shadow to the button. First we will create a variable of type `ftd.shadow`, which is also a record.

-- ftd.shadow s:
color: $shadow-color
x-offset.px: 0
y-offset.px: 0
blur.px: 50
spread.px: 7

Lang:

ftd

Now we will add the component property of type `ftd.shadow` and make it optional

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong
optional ftd.shadow hover-shadow:

Lang:

ftd

And then will add shadow to the button

-- ftd.text: $button.title
link: $button.link
border-width.px: 2
border-radius.px: 6
padding.px: 10
min-width.fixed.px: 175
style: bold
role: $inherited.types.copy-regular
color: $button.text-color
background.solid: $button.bg-color
border-color: $button.border-color
shadow: $button.hover-shadow

Lang:

ftd

Now we can create events which `on-hover` shows the shadow. So we will create a boolean variable to component definition and create two events of `on-mouse-enter` and `on-mouse-leave`.

-- component button:
caption title:
optional string link:
ftd.color text-color: $inherited.colors.text-strong
ftd.color bg-color: $inherited.colors.background.base
ftd.color border-color: $inherited.colors.border-strong
optional ftd.shadow hover-shadow:
boolean $is-hover: false

Lang:

ftd

And then in the button we will add the events.

$on-mouse-enter$: $ftd.set-bool($a = $button.is-hover, v = true)
$on-mouse-leave$: $ftd.set-bool($a = $button.is-hover, v = false)

Lang:

ftd

And to the shadow we will add if condition.

shadow if { button.is-hover }: $button.hover-shadow

Lang:

ftd

Component calling

The button component is called inside a column container component.

-- ftd.column:
background.solid: white
width: fill-container
align-content: center
height.fixed.px: 280


-- button: Get a Demo
hover-shadow: $s
border-color: $shadow-color
text-color: $monochrome-dark
bg-color: $monochrome-light
link: https://fastn.com/expander


-- end: ftd.column

Lang:

ftd

Closing remarks

There you go, we have polished the UI and it looks similar to our original UI with our own touch to it. I hope you have learnt with me and found this video easy to follow. If you like us, you can give us a ✨ on [GitHub](https://github.com/fastn-stack/fastn). Also, we would love to see your package which you will create following this video. You can share it on the dicord's [show-and-tell](https://discord.gg/kTxKjpNK6v) channel. Thank you guys.

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.

How to create a button

Introduction

**Project buildup**

Component calling

Closing remarks

Support `fastn`!

Getting Help

Found an issue?

Quick links:

Join us

Project buildup