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.
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.
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`
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.
`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.
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.
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`.
$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.
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.