# Components

## Overview

This starter is delivering with ready-to-use utils, styled components, helpers and much more. Some majors of these are described in this section.

## Button

## Label

Default Cancel Primary Secondary Success Info Warning Error

## Loader

## Grid

#### Grow and auto width columns controlled with .fill class

Grow column
Auto column
Grow column

#### Equal-width columns defined in .row with .cols-{breakpoint}-{size} syntax

1 column
2 column
3 column
4 column
5 column
6 column
7 column
8 column

#### Control column width in each .col with .col-{breakpoint}-{size} syntax

1 column
2 column
3 column
4 column

#### Offset columns with .offset-{breakpoint}-{size} syntax

1 column
2 column
3 column
4 column

#### Gaps controlled with .gap-{breakpoint} for XY axes, .gap-{breakpoint}-x for X axis or .gap-{breakpoint}-y for Y axis syntax defined in .row class

1 column
2 column
3 column
4 column
5 column
6 column

## Helper

There are a bunch of different css helper classes such as .d-flex, .mt-4, .bg-primary, .color-error etc.

Full list you can view in @/src/sass/component/helper.scss file.

## Table

#### Default table

Lorem ipsum | Dolor sit
--- | ---
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit

#### Table with .table_striped and .table_sm class

Lorem ipsum | Dolor sit
--- | ---
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit

#### Table with .table_borderless and .table_sm class

Lorem ipsum | Dolor sit
--- | ---
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit
Lorem ipsum | Dolor sit

## Toast

Controls with data-toast, data-toast-type and data-toast-duration attributes.

If the data-toast is empty then toast text will be equal event.target.textContent .

Example with custom text, primary type and 10s duration.

## Copy to clipboard

Controls with data-copy attribute.

If the data-copy is empty then text to copy will be equal event.target.textContent .

Also you can combine data attributes and set data-toast to notify user.