Button

Overview

Even though the button styles let you have tons of different buttons, remember that consistency must be kept across all your project and within Selectra's own style line.

Usage

Dependencies

To get the button component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/btn';

Basic code

A button is composed by an element which has the btn class with a size and a color modifier, it can be set on one of the following element:

• button(type="button/submit/reset")
• input(type="button/submit/reset")
• a

<!-- Button -->
<button type="button" class="btn btn--md btn--secondary">Label</button>

<!-- Input -->
<input type="submit" class="btn btn--md btn--secondary" value="Label" />

<!-- Link -->
<a href="" class="btn btn--md btn--secondary">Label

//- Button
button(type='button').btn.btn--md.btn--secondary Label

//- Input
input(type='submit').btn.btn--md.btn--secondary Label

//- Link
a(href='').btn.btn--md.btn--secondary Label

Modifiers

Add the following modifier to change the appearance of a button.

• Size
• Color
• Pill
• Outline
• Circle
• Block

🤘 Tips: You can mix modifiers together to achieve the desired appearance.

Size

Size modifier comes in 3 variants and allows you to change the font size and the padding of the button making it smaller or bigger.

<!-- Small -->
<button type="button" class="btn btn--sm">Label</button>

<!-- Medium -->
<button type="button" class="btn btn--md">Label</button>

<!-- Large -->
<button type="button" class="btn btn--lg">Label</button>

//- Small
button(type='button').btn.btn--sm Label

//- Medium
button(type='button').btn.btn--md Label

//- Large
button(type='button').btn.btn--lg Label

Color

7 colors are available based on the main colors of the theme used in your project.

<!-- Primary -->
<button type="button" class="btn btn--primary"></button>

<!-- Secondary -->
<button type="button" class="btn btn--secondary"></button>

<!-- Success -->
<button type="button" class="btn btn--success"></button>

<!-- Warning -->
<button type="button" class="btn btn--warning"></button>

<!-- Danger -->
<button type="button" class="btn btn--danger"></button>

<!-- Grey -->
<button type="button" class="btn btn--grey"></button>

<!-- White -->
<button type="button" class="btn btn--white"></button>

//- Primary
button(type='button').btn.btn--primary

//- Secondary
button(type='button').btn.btn--secondary

//- Success
button(type='button').btn.btn--success

//- Warning
button(type='button').btn.btn--warning

//- Danger
button(type='button').btn.btn--danger

//- Grey
button(type='button').btn.btn--grey

//- White
button(type='button').btn.btn--white

🧐 UX wise: Be careful when choosing the color of your button, make sure the contrast between the background and the foreground comply with the WCAG 2.0. You can use this tool to check contrasts.

Pill

Button can take the shape of a pill (round corners) using the modifier below.

<button type="button" class="btn btn--pill"></button>

button(type='button').btn.btn--pill

Outline

Outline modifier, remove the background of the button in profit of a border.

<button type="button" class="btn btn--outline"></button>

button(type='button').btn.btn--outline

Circle

Circle modifier change the shape of the button for a circle, it must be used only with an icon.

<button type="button" class="btn btn--circle"></button>

button(type='button').btn.btn--circle

Block

Block modifier allows the button to fit the whole width of his direct ancestor.

<button type="button" class="btn btn--block"></button>

button(type='button').btn.btn--block