Parts UI - Components / Buttons

.parts-btn

<button type="button" class="parts-btn">Button</button>

Copied

Sizes

--xl
--lg
--md
--sm
--xs

<button type="button" class="parts-btn parts-btn--xl">xlarge</button>
<button type="button" class="parts-btn parts-btn--lg">large</button>
<button type="button" class="parts-btn parts-btn--md">medium</button>
<button type="button" class="parts-btn">default</button>
<button type="button" class="parts-btn parts-btn--sm">small</button>
<button type="button" class="parts-btn parts-btn--xs">xsmall</button>

Copied

Colors

--info
--success
--warning
--alert

<button type="button" class="parts-btn parts-btn--info">Info</button>
<button type="button" class="parts-btn parts-btn--success">Success</button>
<button type="button" class="parts-btn parts-btn--warning">Warning</button>
<button type="button" class="parts-btn parts-btn--alert">Alert</button>

Copied

--dark
--gray
--gray-light
--light

<button type="button" class="parts-btn parts-btn--dark">Dark</button>
<button type="button" class="parts-btn parts-btn--gray">Gray</button>
<button type="button" class="parts-btn parts-btn--gray-light">Gray-light</button>
<button type="button" class="parts-btn parts-btn--light">Light</button>

Copied

--alpha

Used as an extra along with a color modifier. Makes the button color semitransparent. Often used to be placed on a dark background.

<button type="button" class="parts-btn parts-btn--alpha parts-btn--info">alpha info</button>
<button type="button" class="parts-btn parts-btn--alpha parts-btn--succsess">alpha success</button>
<button type="button" class="parts-btn parts-btn--alpha parts-btn--light">alpha light</button>

Copied

Styles

--outline

<button type="button" class="parts-btn parts-btn--outline">outline</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--info">outline info</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--success">outline success</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--warning">outline warning</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--alert">outline alert</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--dark">outline dark</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--gray">outline gray</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--gray-light">outline gray-Light</button>

Copied

--thick
--dashed

Used only together with --outline modifier

<button type="button" class="parts-btn parts-btn--outline parts-btn--thick">outline dashed</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--thick parts-btn--info">outline thick info</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--dashed parts-btn--orange">outline dashed orange</button>
<button type="button" class="parts-btn parts-btn--outline parts-btn--dashed parts-btn--thick parts-btn--success">outline dashed thick success</button>

Copied

--rounded
--corner
--amount
--shadow
--text

<button type="button" class="parts-btn parts-btn--rounded">Rounded</button>
<button type="button" class="parts-btn parts-btn--corner">Corner</button>
<button type="button" class="parts-btn parts-btn--amount">Amount</button>
<button type="button" class="parts-btn parts-btn--shadow">Shadow</button>
<button type="button" class="parts-btn parts-btn--text">Text</button>

Copied

--block

<button type="button" class="parts-btn parts-btn--block">Block info</button>

Copied

--icon

Icon-button

<button type="button" class="parts-btn parts-btn--icon">
  <img class="parts-icon" src="" alt="" />
</button>

Copied

Read more about usage of icons in the Icons section

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message