ComboStrap Styling - Skin attribute (Button Emphasis Control)

Undraw My Documents

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:

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




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Undraw My Documents
ComboStrap Styling - Design System

The ComboStrap design system takes all the good part of Boostrap but does not stop there as it also integrates Google Material Design recommandations ComboStrap applies the following Google...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw My Documents
Hover animation

Improve the emphasis of your component by adding onHover animation
Undraw My Documents
How to add emphasis in your website (ComboStrap)

This article shows you how you can add emphasis on component in your page
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion



Task Runner