Button

This is the documentation on how to use the Button component on your stack theme.

Integration

• The icons for this component is relying heavily on material icons. If you wish to pull another iconset, please follow their documentation with regards to things.

• Once Stack is in your node modules folder, put this in the styling file that you've made for your project:

SCSS

@use '~@growstocks/stack/Components/Button';

...

@include Button.render(
    ...
);

HTML

• Default / Text

<button class="sc-button">
    <i class="material-icons sc-button__icon" aria-hidden="true">thumb_up</i>
    <span class="sc-button__label">Liked</span>
</button>

• Outlined

<button class="sc-button sc-button--outlined">
    <i class="material-icons sc-button__icon" aria-hidden="true">thumb_up</i>
    <span class="sc-button__label">Liked</span>
</button>

• Filled

<button class="sc-button sc-button--filled">
    <i class="material-icons sc-button__icon" aria-hidden="true">thumb_up</i>
    <span class="sc-button__label">Liked</span>
</button>

API

CSS Classes

• This API (or Classes in this case) is to be used in the HTML elements you are going to place. From the provided element above you can modify the .btn class into the other states using --.

Class	Output
.sc-button	Outputs the Button component in its bare-bones state (text only)
.sc-button--outlined	Outputs the Button component in its outlined color state
.sc-button--filled	Outputs the Button component in its filled color state
.sc-button__label	The class for the Button component's label
.sc-button__icon	The class for the Button component's icon

Overriding API

• This API is for overriding the current theme for the Button component using the .render() function in your styling file. You can override the following $parameters inside the .render() function.

Parameter	Effect
$color-theme: (...)	MAP - This is where you inject your custom color theme.
$shape-theme: (...)	MAP - This is where you inject your custom shape theme.
$typography-theme: (...)	MAP - This is where you inject your custom typography theme.
$type: (...)	LIST - Sets the button type to render, may it be a single type or multiple types. By default, the value of this parameter is all . This parameter is also not required unless you only want specific styles generated. Available types to set are text, outlined, and filled

Overriding API Implementation Example

...

$_color-theme: (
    'default': (#232323, #fff)
);

@include Button.render(
    $color-theme: $_color-theme,
    $shape-theme: (
        'shape': pill
    ),
    $type: (
        'filled'
    )
);

Copyright (c) 2021 GrowStocks Development Group MIT Licensed