Buttons Gallery

Button variants, styles, sizes, and interactive states

Social Buttons

Test loading state: click any button

Button Sizes

Test formIncomplete state: click any button

class: vwfsize-xs

class: vwfsize-sm

class: vwfsize-md

class: vwfsize-lg

class: vwfsize-xl

Button states

leftIcon: size-6 oj-ux-flg-{cnt.value} --> ... icon is removed from DOM in loading state

Test loading state: ... --> ... click any button

Test formIncomplete state: --> click any button

Test disabled state: --> click any button

Button Subtle Orig Color Variants

Subtle background, colored text, colored shadow effect on hover, colored ring on focus):

Button Subtle Alt Opacity Variants

Subtle background, colored text, colored shadow effect on hover, colored ring on focus):

Button Subtle Alt Color Variants

Subtle background, colored text, colored shadow effect on hover, colored ring on focus):

Button Simple OrigColor Variants

Subtle background, colored text, colored shadow effect on hover and larger shadow on focus

Button Simple Alt Opacity Variants

Subtle background, colored text, colored shadow effect on hover and larger shadow on focus

Button Simple Alt Color Variants

Subtle background, colored text, colored shadow effect on hover and larger shadow on focus

Button Accent Color Variants

Accent background, colored text, colored shadow effect on hover, colored ring on focus):

Button Secondary Color Variants

White background, midnight text & fog border, colored, and bg-cloud, and colored border effect on hover, colored ring on focus):

Button Outline Color Variants

No background, colored text and border, colored shadow and background effect on hover, colored ring on focus):

Button Ghost Color Variants

No background, Colored text, colored shadow and background effect on hover, colored ring on focus):

Button Solid Color Variants

Solid background, white text, colored shadow effect on hover, colored ring on focus):

Button Semantic Variants

Outline:

Subtle:

Subtle Alt:

Accent:

Solid:

Gradient:

Alt Solid:

Regular Solid:

Light Solid:

Button Sizes

Test formIncomplete state: --> click any button

class: vwfsize-6xs

class: vwfsize-5xs

class: vwfsize-4xs

class: vwfsize-3xs

class: vwfsize-2xs

class: vwfsize-xs

class: vwfsize-sm

class: vwfsize-md

class: vwfsize-lg

class: vwfsize-xl

class: vwfsize-2xl

class: vwfsize-3xl

class: vwfsize-4xl

Explore More Components

Browse other component categories