@vcl/button

VCL button

The main control for triggering actions.

Features

Two dimensional modifiers for variant and state. Variants like: emphasized, transparent etc. States like: disabled, pressed, hovered, selected etc.

Usage

Basic

Buttons can be created using the button, a and input tags while the first is to be preferred.

basic example

A button can appear to be disabled through disabled class and/ or disabled attribute.

The default variant support a selected state via selected as well.

selected example

If text exceeds the button's width, the text is cut off and does not break into a new line. With the overflow-ellipsis modifier and ellipsis is shown.

overflow-label example

The label of a button is generally build with an icogram, by virtue of which it supports labels with prepended and appended icons.

icon example

Button sizes can be changed with scaling modifiers from the size-modulation module.

size example

Variants

Multiple variants are supported through modifiers for the following cases:

• Emphasized button which can be used to indicate the primary action.
• Transparent/ half transparent/ alternative transparent variants.
• Semantically colored.
• Outline appearance.
• Round appearance.

variants example

Classes

• button
• button-dim: Just the dimensions of a button.

Modifiers

• square: Give button the same min-width as its height.

Contextual state:

• selected
• active
• focused

Pointer state:

• hovered
• pressed

Label overflow:

• overflow-ellipsis

Variants:

• emphasized: emphasized appearance for the main interaction.
• transparent: with transparent background and hover indication by color.
• emphasized-transparent: combo of previous two.
• half-transparent: transparent background but not on hover.
• transparent-alt: transparent for dark backgrounds.
• danger: prevent users from accidentally doing dangerous things.
• suggestive: suggest users to safely conduct an action.

Additional Modifiers:

• outline: the border is used as outline, transparent background.
• circular: Circular shape.

Variables

See --button-* variables in the default theme.

Demo

example.html on GH-pages.