a fastn package

Home

MIT LICENSE

Overview

Usage Documentation

With export(recommonded)

As btn alias

Via import

Button

Package name:

gsalunke.github.io/fastn-button

Package name:

gsalunke.github.io/fastn-button

License:

Open Source BSD

Buttons allow users to take actions, and make choices, with a single tap.

Demo

TEXT

Contained

Outlined

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

Modal windows
Forms
Cards
Toolbars

These fastn buttons are inspired from Matrrial UI and uses fastn typography and color tokens.

Basic Button

The Button comes with three variants: text (default), contained, and outlined.

Example of basic button: default medium size

Input

-- button: TEXT
variant: text
link: index.html

-- button: Contained
variant: contained
link: index.html

-- button: Outlined
variant: outlined
link: index.html

-- button: TEXT
variant: text
link: index.html

-- button: Contained
variant: contained
link: index.html

-- button: Outlined
variant: outlined
link: index.html

Lang:

ftd

Output

TEXT

Contained

Outlined

Example of basic button: small size

Input

-- button: TEXT
variant: text
link: index.html
size: small

-- button: Contained
variant: contained
link: index.html
size: small

-- button: Outlined
variant: outlined
link: index.html
size: small

-- button: TEXT
variant: text
link: index.html
size: small

-- button: Contained
variant: contained
link: index.html
size: small

-- button: Outlined
variant: outlined
link: index.html
size: small

Lang:

ftd

Output

TEXT

Contained

Outlined

Example of basic button: large size

Input

-- button: TEXT
variant: text
link: index.html
size: large

-- button: Contained
variant: contained
link: index.html
size: large

-- button: Outlined
variant: outlined
link: index.html
size: large

-- button: TEXT
variant: text
link: index.html
size: large

-- button: Contained
variant: contained
link: index.html
size: large

-- button: Outlined
variant: outlined
link: index.html
size: large

Lang:

ftd

Output

TEXT

Contained

Outlined

Basic Button Properties:

Below are details of all common properties of basic button.

title

{

type:

Caption (required)

}

It’s used to add title to button.

variant

{

type:

String (required)

}

It’s used to define variant of the button. There are three(3) button variants:

text - button appears as a text, and on mouse over background color is shown.
contained - button appears as a contained button, with background color $inherited.colors.cta-primary.base.
outlined - button outlined with $inherited.colors.cta-primary.border.

Additional Properties:

Below are details of additional properties of fastn-button.

link

{

type:

String (optional)

}

It’s used to add url to button. If you wish to use fastn $on-click$ event then don’t add this property.

size

{

type:

String (optional)

}

It’s used to define button size. It’s optional property and default value is medium, there are only three(3) sizes of button(small, medium and large), it uses below tokens from fastn typography according to its value:

small - uses $inherited.types.button-small
medium - uses $inherited.types.button-medium
large - uses $inherited.types.button-large

How to use `fastn-button`?

To use fastn button inside fastn projects try below methods as per requirement.

Button

Demo

Basic Button

Basic Button Properties:

Additional Properties:

How to use fastn-button?

How to use `fastn-button`?