---json
{
    "page_id": "vtolj4xia392o6fi0mhsl"
}
---
====== ComboStrap Styling - Skin attribute (Button Emphasis Control) ======


===== About =====
''skin'' is a [[styling|ComboStrap styling attribute]] that defines the [[docs:styling:emphasis|emphasis]] level of your [[docs:content:button|button]] by applying a set of standard styling attribute on:
  * [[color|color]]
  * [[shadow|elevation (shadow)]]
  * and [[border|border]]





===== Syntax =====

<code dw>
<component skin="value">
</code>
where ''value'' is one of:
  * ''contained''
  * ''filled'' (default)
  * ''outline''
  * ''text''


This attribute is used mostly with the [[docs:content:button|button]] but it works also only on the following components:
  * [[docs:block:note|note]]
  * [[docs:block:card|card]]
===== Skin and Emphasis Level =====

^ Name ^ Emphasis Level ^ Text \\ Color ^ Background \\ Color ^ Border \\ Color ^ [[shadow|Medium Elevation]] ^
| Contained | High | 🗸 | 🗸 | 🗸 | 🗸 |
| Filled (Default) | Medium | 🗸 | 🗸 | 🗸 | |
| Outline | Low | 🗸 | | 🗸 | |
| Text | Normal | 🗸 | | |

===== Example =====


==== Button ====

With a [[docs:content:button|button]]
<webcode name="Skin" >
<code dw>
<btn secondary skin="contained">Contained</btn>
<btn secondary skin="filled">Filled</btn>
<btn secondary skin="outline">Outline</btn>
<btn secondary skin="text">Text</btn>
</code>
</webcode>

==== Note ====

With a [[docs:block:note|note]]
<webcode name="Skin Note" >
<code dw>
<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>
</code>
</webcode>

==== Card ====

With a [[docs:block:card|card]]
<webcode name="Skin Card" >
<code dw>
<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>
</code>
</webcode>