EvoKit - Button

Just a button <Button>

Install

Peer dependencies evokit. More about install

npm install evokit-button --save

Usage

More about usage

import React from 'react';
import { Button } from 'evokit-button';
import 'evokit-button/style.css';

const handleClick = () => alert('Hello world!');

const App = () => (
    <Button type='button' onClick={handleClick}>
        ...
    </Button>
);

Props

Also supports other valid props of the React Element type, disabled, onClick etc. More about use props

<Button />

| Prop name | Default value | Possible value | Description | |--------------------|------------------|----------------|--------------| | button-display | inline-flex | inline-flex none | Display type | | button-events | auto | auto none | Respond to mouse/touch events | | button-height | auto | auto inherit 1-1 | Set the height | | button-padding * | null | none xxs xs s m l xl xxl 3xl 4xl 5xl | Inner indent around an button content | | button-round * | null | none full xxs xs s m l xl xxl 3xl 4xl 5xl | Corner rounding | | button-size | null | none inherit default small big h1 h2 h3 h4 h5 h6 | Font size | | button-theme | null | Create theme | Background, border and text colors | | button-valign | middle | baseline bottom middle sub super text-bottom text-top top | Vertical alignment | | button-weight | null | thin light normal medium bold black | Font weight | | button-width | auto | auto inherit 1-1 | Set the width |

* — prop has advanced params

Customize

This set of css variables is default, if you want to override one or more value, please use the rules css-variable-usage, define them below the css import.

@custom-media --ek-button-media-small only screen and (min-width: 480px);
@custom-media --ek-button-media-medium only screen and (min-width: 768px);
@custom-media --ek-button-media-large only screen and (min-width: 960px);
@custom-media --ek-button-media-wide only screen and (min-width: 1200px);
@custom-media --ek-button-media-huge only screen and (min-width: 1400px);

:root {
    /* base */
    --ek-button-border-radius: 2px;
    --ek-button-border-width: 1px;
    --ek-button-font-size: inherit;
    --ek-button-font-weight: bold;
    --ek-button-line-height: 1em;
    --ek-button-padding: 10px 15px;
    --ek-button-transition: 150ms ease-in-out;
    /* prop 'button-padding' */
    --ek-button-indent-xxs: 5px;
    --ek-button-indent-xs: 10px;
    --ek-button-indent-s: 15px;
    --ek-button-indent-m: 20px;
    --ek-button-indent-l: 25px;
    --ek-button-indent-xl: 30px;
    --ek-button-indent-xxl: 35px;
    --ek-button-indent-3xl: 40px;
    --ek-button-indent-4xl: 45px;
    --ek-button-indent-5xl: 50px;
    /* prop 'button-round' */
    --ek-button-round-xxs: 2px;
    --ek-button-round-xs: 4px;
    --ek-button-round-s: 6px;
    --ek-button-round-m: 8px;
    --ek-button-round-l: 10px;
    --ek-button-round-xl: 12px;
    --ek-button-round-xxl: 14px;
    --ek-button-round-3xl: 16px;
    --ek-button-round-4xl: 18px;
    --ek-button-round-5xl: 20px;
    --ek-button-round-full: 50%;
    /* prop 'button-size' */
    --ek-button-size-small: 11px;
    --ek-button-size-default: var(--ek-button-font-size);
    --ek-button-size-big: 15px;
    --ek-button-size-h1: 24px;
    --ek-button-size-h2: 22px;
    --ek-button-size-h3: 20px;
    --ek-button-size-h4: 18px;
    --ek-button-size-h5: 16px;
    --ek-button-size-h6: 14px;
}

Live demo

button-display

Display type

• inline-flex - block element that is wrapped around by other elements
• none - remove from a document

<Button button-display='none'>
    ...
</Button>

button-height

Set the height

• auto - value: auto
• inherit - value: inherit
• 1-1 - value: 100%

<Button button-height='1-1'>
    ...
</Button>

button-width

Set the width

• auto - value: auto
• inherit - value: inherit
• 1-1 - value: 100%

<Button button-width='1-1'>
    ...
</Button>

button-padding

Inner indent around an button content. The property allows you to set the indentation value for all sides at once or to determine it only for specified side.

Advanced props

• button-padding-top {1}
• button-padding-right {2}
• button-padding-bottom {3}
• button-padding-left {4}

Multi values (set value separated by a space)

• button-padding="{1,3} {2,4}"
• button-padding="{1} {2,4} {3}"
• button-padding="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0px | | xxs | --ek-button-indent-xxs | 5px | | xs | --ek-button-indent-xs | 10px | | s | --ek-button-indent-s | 15px | | m | --ek-button-indent-m | 20px | | l | --ek-button-indent-l | 25px | | xl | --ek-button-indent-xl | 30px | | xxl | --ek-button-indent-xxl | 35px | | 3xl | --ek-button-indent-3xl | 40px | | 4xl | --ek-button-indent-4xl | 45px | | 5xl | --ek-button-indent-5xl | 50px |

<Button button-padding='s' />
<Button button-padding='s m' />
<Button button-padding='s m l' />
<Button button-padding='s m l xl' />
<Button
    button-padding-top='s'
    button-padding-right='m'
    button-padding-bottom='l'
    button-padding-left='xl'
/>

button-round

Corner rounding. The property allows you to set the border radius for all corners at the same time or to determine it only for the specified angle.

Advanced props

• button-round-top-left {1}
• button-round-top-right {2}
• button-round-bottom-right {3}
• button-round-bottom-left {4}

Multi values (set value separated by a space)

• button-round="{1,3} {2,4}"
• button-round="{1} {2,4} {3}"
• button-round="{1} {2} {3} {4}"

List of values

| Value | CSS var | CSS value | |--------|-----------------------|-----------| | none | --- | 0px | | full | --ek-button-round-full | 50% | | xxs | --ek-button-round-xxs | 2px | | xs | --ek-button-round-xs | 4px | | s | --ek-button-round-s | 6px | | m | --ek-button-round-m | 8px | | l | --ek-button-round-l | 10px | | xl | --ek-button-round-xl | 12px | | xxl | --ek-button-round-xxl | 14px | | 3xl | --ek-button-round-3xl | 16px | | 4xl | --ek-button-round-4xl | 18px | | 5xl | --ek-button-round-5xl | 20px |

<Button button-round='s' />
<Button button-round='s m' />
<Button button-round='s m l' />
<Button button-round='s m l xl' />
<Button
    button-round-top-left='s'
    button-round-top-right='m'
    button-round-bottom-right='l'
    button-round-bottom-left='xl'
/>

button-weight

Font weight

• thin - value: 100
• light - value: 300
• normal - value: 400
• medium - value: 500
• bold - value: 700
• black - value: 900

<Button button-weight='normal'>
    ...
</Button>

button-size

• none - value: 0px
• inherit - Inherits the meaning of the parent.
• small - css variable --ek-button-size-small, default value: 11px
• default - css variable --ek-button-size-default, default value: 13px
• big - css variable --ek-button-size-big, default value: 15px
• h1 - css variable --ek-button-size-h1, default value: 24px
• h2 - css variable --ek-button-size-h2, default value: 22px
• h3 - css variable --ek-button-size-h3, default value: 20px
• h4 - css variable --ek-button-size-h4, default value: 18px
• h5 - css variable --ek-button-size-h5, default value: 16px
• h6 - css variable --ek-button-size-h6, default value: 14px

<Button button-size='big'>
    ...
</Button>

button-valign

• top - Align the top edge of the element to the top of the tallest line item.
• bottom - Aligns the base of the current element at the bottom of the element of the line below it all
• middle - The alignment of the midpoint of the element at the baseline of the parent plus half the height of the parent element
• baseline - Aligns the baseline of the current element to the parent's baseline
• sub - The element is depicted as subscript, in the form of a subscript
• super - The element is depicted as superscript, in the form of a superscript
• text-top - The top border of the element is aligned to the highest text element of the current line
• text-bottom - The bottom border of the element is aligned at the very bottom edge of the current line

<Button button-valign='baseline'>
    ...
</Button>

button-events

• auto - Restores item functionality to default.
• none - Prevents mouse events and clicks on an element.

<Button button-events='none'>
    ...
</Button>

button-theme

Set the background, border and text colors.

The theme has some interactive states, such as focus hover active disabled. If you want to display statically one of them, apply button-theme='{THEME_NAME}:hover'

For example, we created a primary theme

All effects:

<Button button-theme='primary' />

One state without more effects:

<Button button-theme='primary:active' />

Set the THEME_NAME depending on the theming