Primary Button

Package name:

fifthtry.github.io/button

License:

Open Source BSD

Demo

How to use

To use button components on your fastn web project, add below into FASTN.ftd file:

-- fastn.dependency: fifthtry.github.io/button

Lang:

ftd

Now import button inside your .ftd file

-- import: fifthtry.github.io/button

Lang:

ftd

Use button.button inside your .ftd files

Input

-- button.button: PRIMARY
role: primary
large: true
link: index.html

Lang:

ftd

Output

PRIMARY

Properties:

Below are details of all properties of button component.

title

type:

Caption (required)

It's used to title to the button component.

role

type:

String (required)

It's used to add role to button component. Use role as primary secondary or tertiary as per your need.

large

type:

Boolean (required)

If you want use large button then add this property value as true. Use extra-large, medium or small and add its value as true as per your need.

link

type:

String (optional)

It's used to add link to button component. If you are not using link property then, you can add $on-click$ event incase you want to add on-click function.

Below example shows how on-click event works.

Input

-- boolean $toggle-event: false

-- button.button: Show modal
role: primary
large: true
$on-click$: $ftd.toggle($a = $toggle-event)

-- modal-cover.modal-cover: Sign Up!
$open: $toggle-event
show-form: true
placeholder: Your email address here
cta-text: Continue
footer: What is it? [Terms and conditions](modal-cover/)

25% Off On Your First Purchase* Enter code WELCOME at checkout
Discover new apps, things to do & more great news added daily!

Lang:

ftd

Output

Show modal