docs:styling:skin

About

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

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:

note
card

Skin and Emphasis Level

Name	Emphasis Level	Text Color	Background Color	Border Color	Medium Elevation
Contained	High	🗸	🗸	🗸	🗸
Filled (Default)	Medium	🗸	🗸	🗸
Outline	Low	🗸		🗸
Text	Normal	🗸

Example

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>

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

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