ComboStrap Styling - Skin attribute (Button Emphasis Control)

1 - About

skin is a ComboStrap styling attribute that defines the emphasis level of your button by applying a set of standard styling attribute on:

Since version 1.4

3 - Syntax

<component skin="value">

where value is one of:

  • contained
  • filled (default)
  • outline
  • text

This attribute is used mostly with the button but it works also only on the following components:

4 - Skin and Emphasis Level

Name Emphasis Level Text
Color
Background
Color
Border
Color
Medium Elevation
Contained High ๐Ÿ—ธ ๐Ÿ—ธ ๐Ÿ—ธ ๐Ÿ—ธ
Filled (Default) Medium ๐Ÿ—ธ ๐Ÿ—ธ ๐Ÿ—ธ
Outline Low ๐Ÿ—ธ ๐Ÿ—ธ
Text Normal ๐Ÿ—ธ

5 - Example

5.1 - Button

With a button

<btn secondary skin="contained">Contained</btn>
<btn secondary skin="filled">Filled</btn>
<btn secondary skin="outline">Outline</btn>
<btn secondary skin="text">Text</btn>

5.2 - Note

With a note

<note skin="contained">A Contained Note</note>
<note skin="filled">A Filled Note</note>
<note skin="outline">An Outlined Note</note>
<note skin="text">A Textual Note</note>

A Contained Note
A Filled Note
An Outlined Note
A Textual Note

5.3 - Card

With a card

<card primary skin="contained" spacing="my-2">A Contained Card</card>
<card primary skin="filled" spacing="my-2">A Filled Card</card>
<card primary skin="outline" spacing="my-2">An Outlined Card</card>
<card primary skin="text" spacing="my-2">A Textual Card</card>

A Contained Card

A Filled Card

An Outlined Card

A Textual Card

Powered by ComboStrap