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.
A button can appear to be disabled through vclDisabled
class and/ or
disabled
attribute.
The default variant support a selected state via vclSelected
as well.
If text exceeds the button's width, the text is cut off and does not break
into a new line. With the vclOverflowEllipsis
modifier and
ellipsis is shown.
The label of a button is generally build with an icogram, by virtue of which it supports labels with prepended and appended icons.
Button sizes can be changed with scaling modifiers from the size-modulation module.
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.
Classes
vclButton
-
vclButtonDim
: Just the dimensions of a button.
Modifiers
-
vclSquare
: Give button the samemin-width
as its height.
Contextual state:
vclSelected
vclActive
vclFocused
Pointer state:
vclHovered
vclPressed
Label overflow:
vclOverflowEllipsis
Variants:
-
vclEmphasized
: emphasized appearance for the main interaction. -
vclTransparent
: with transparent background and hover indication by color. -
vclEmphasizedTransparent
: combo of previous two. -
vclHalfTransparent
: transparent background but not on hover. -
vclTransparentAlt
: transparent for dark backgrounds. -
vclDanger
: prevent users from accidentally doing dangerous things. -
vclSuggestive
: suggest users to safely conduct an action.
Additional Modifiers:
-
vclOutline
: the border is used as outline, transparent background. -
vclCircular
: Circular shape.
Variables
See --button-*
variables in the default theme.
Demo
example.html on GH-pages.