Button

Styles

Default

We are default to muted style of buttons, because you need to decide which of the buttons and/or actions on the screen ar primary and set this specifically.

Default Button
Filled

This style is used for primary buttons

Filled Button
Flat

Style for buttons, that do not look like buttons from the first sight - have no background fill or visible borders. Yet it has tappable area and does some kind of action. Its label stands out or there is just icon inside.

Flat Button

Inverse

Inverse property enables buttons to be used on colored backgrounds. It works in combination with button style.

For default style buttons

Themes are not applicable.

Inverse Button
For filled style buttons

Setting a theme for these kind of buttons only affects the text color.

Inverse Filled Button

Inverse Filled Warning Button
For flat style buttons

Since the only thing changing for flat buttons is the text color, themes are not applicable.

Inverse Flat Button

Width

Parent

Buttons that fill entire parent container horizontally. Used for main screen/section actions.

Default Button

Filled Button

Flat Button

Content

Buttons that are placed in list cells etc. and has content around them.

Default Button
Filled Button
Flat Button

Sizes

Default

Default button size, used for screen main actions, etc.

Default Size

Default Size Filled

Default Size Flat

Default Size Inverse

Default Content
Default Content Filled
Default Content Flat
Medium

Slightly smaller as default, used in card actions.

Medium Button

Medium Filled Button

Medium Flat Button

Medium Inverse Button

Medium Content Button
Medium Content Filled Button
Medium Content Flat Button
Small

Sometimes you need display smaller actions, this option is for you. Especially when using content buttons

Small Button

Small Filled Button

Small Flat Button

Small Inverse Button

Small Content Button
Small Content Filled Button
Small Content Flat Button

Themes

By default buttons use primary theme.

Default Button

Filled Button

Flat Button

Inverse Button

Medium Button

Medium Filled Button

Medium Flat Button

Medium Inverse Button

Filled Small Container Button
Small Container Button
Flat Small Container Button
Inverse Small Container Button

Other themes are based on defined Vinted Themes.

Default Button

Amplified Button

Muted Button

Success Button

Warning Button

Themes work for button styles, such as filled, flat. It also works in combination with inverse property.

Filled Button

Filled Amplified Button

Filled Muted Button

Filled Success Button

Filled Warning Button

Inverse Filled Button

Inverse Filled Amplified Button

Inverse Filled Muted Button

Inverse Filled Success Button

Inverse Filled Warning Button

States

Default

Default state is primary case for all button types.

Default Button

Default Filled Button

Default Flat Button

Default Inverse Button
Focused

Focused state is used when user focused or hovers with mouse pointer on a button. Buttons have additional background layer with 0.02 opacity. Filled Button has black color layer with this opacity, and other types use theme color instead.

Focused Button

Focused Filled Button

Focused Flat Button

Focused Inverse Button

Clicked

Clicked state is used when user clicks or pressed the button. Buttons have additional background layer with 0.04 opacity. Filled Button has black color layer with this opacity, and other types use theme color instead.

Clicked Button

Clicked Filled Button

Clicked Flat Button

Clicked Inverse Button

Disabled

Disabled state is used when buttons are disabled. Disabled buttons have 0.48 opacity and are not clickable.

Disabled Button

Disabled Filled Button

Disabled Flat Button

Disabled Inverse Button

Content

Icons

Icon could be placed inside the button content. IconPosition indicates where Icon will be placed relatively to the button text (left, right). If IconPosition is not specified, then it’s assumed that Icon should be rendered in the center of the button. Note that buttons without text, where only an icon is shown, have different padding values.

By default, icons inherit button theme color (same as button text color), but icons can have colors of their own.

Icon sizes match button sizes, meaning default button uses default size icons, medium buttons - medium size icons, small buttons - small size icons.

Add to favourites

Continue


Add to favourites

Continue


Add to favourites

Continue


Add

Open


Add to favourites
Continue


Add to favourites
Continue


Add to favourites
Continue


Add
Open
Loader

Buttons can also contain Loader component. Loader color is determined by the button theme.

  • Loader theme is the same as Button theme.
  • When Button is filled - Loader has no theme (meaning, it is white).
Add to favourites

Continue

Complete


Add to favourites

Continue

Complete

Add to favourites

Continue

Complete


Add to favourites

Continue

Complete
Add to favourites

Continue

Complete


Add to favourites

Continue

Complete

When content width buttons are used, the appearance of Loader does not change the size of the button. In other words, once the text is replaced with the Loader, button size stays the same.

Add to favourites
Continue


Add to favourites
Continue


Add to favourites
Continue


Add
Open

Specifications

$button-sizes                      : (default, medium, small);

$button-border-width               : unit(0.25);
$button-border-radius              : radius(default);

// -----------------------------------------------------------------------
// Styles
// -----------------------------------------------------------------------

$button-default-background         : none;
$button-default-border-color       : currentColor; // inherits button color

$button-filled-text-theme          : 'inverse';
$button-filled-background          : currentColor; // inherits button color
$button-filled-border-color        : currentColor; // inherits button color

$button-flat-background            : none;
$button-flat-border-color          : transparent;

// -----------------------------------------------------------------------
// Inverse
// -----------------------------------------------------------------------

$button-inverse-color:                  palette(cg9);

// style: default
//
// Background color is left unchanged
$button-inverse-text-theme:             'inverse';
$button-inverse-border-color:           currentColor; // inherits text color

// style: filled
//
// Text color is left unchanged (depends on button theme)
$button-inverse-filled-background:      $button-inverse-color;
$button-inverse-filled-border-color:    $button-inverse-color;

// style: flat
$button-inverse-flat-text-theme:        'inverse';

// -----------------------------------------------------------------------
// Text
// -----------------------------------------------------------------------

$button-text-type: (
  default:  'title',
  medium:   'subtitle',
  small:    'caption',
);

$button-text-weight: 500;

// -----------------------------------------------------------------------
// Size and Spacing
// -----------------------------------------------------------------------

$button-height: (
  default:  unit(11),
  medium:   unit(9),
  small:    unit(7)
);

// Button padding when text is present
$button-padding: (
  default: (
    top:    unit(2.75),
    right:  unit(3.5),
    bottom: unit(2.75),
    left:   unit(3.5),
  ),

  medium: (
    top:    unit(2.25),
    right:  unit(2.75),
    bottom: unit(2.25),
    left:   unit(2.75),
  ),

  small: (
    top:    unit(1.5),
    right:  unit(2),
    bottom: unit(1.5),
    left:   unit(2),
  )
);

// Button padding when icon is present alongside text
$button-padding-with-icon: (
  default: (
    top:    unit(2.75),
    right:  unit(3.5),
    bottom: unit(2.75),
    left:   unit(3.5),
  ),

  medium: (
    top:    unit(2.25),
    right:  unit(2.75),
    bottom: unit(2.25),
    left:   unit(2.75),
  ),

  small: (
    top:    unit(1.5),
    right:  unit(2),
    bottom: unit(1.5),
    left:   unit(2),
  )
);

// Button padding when no text is present (for example, when only icon is present)
$button-padding-without-text: (
  default: (
    top:    unit(2.5),
    right:  unit(2.5),
    bottom: unit(2.5),
    left:   unit(2.5),
  ),

  medium: (
    top:    unit(2.5),
    right:  unit(2.5),
    bottom: unit(2.5),
    left:   unit(2.5),
  ),

  small: (
    top:    unit(2),
    right:  unit(2),
    bottom: unit(2),
    left:   unit(2),
  )
);

// Space between button text and icon
$button-icon-margin: (
  default:  unit(1.5),
  medium:   unit(1),
  small:    unit(0.5),
);

// -----------------------------------------------------------------------
// Themes
// -----------------------------------------------------------------------

$button-default-text-theme         : 'primary';
$button-themes                     : (primary, amplified, warning, success);

// -----------------------------------------------------------------------
// States
// -----------------------------------------------------------------------

$button-focused-darkness-unit      : 0.02;
$button-clicked-darkness-unit      : ($button-focused-darkness-unit * 4);
$button-disabled-opacity-unit      : ($button-focused-darkness-unit * 24);

$button-focused-border-color       : currentColor;
$button-focused-background-color   : currentColor;

API

name type default
style default / filled / flat default
size default / medium / small default
theme primary / amplified / muted / success / warning primary
inverse false / true false
text String ””
width content / parent parent
enabled Boolean true
iconName String ””
iconPosition left / right / none none