3.0.2 • Public • Published

EvoKit - Button

Just a button <Button>


Peer dependencies evokit. More about install

npm install evokit-button --save


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}>


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


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

Edit button-usage


Display type

  • inline-flex - block element that is wrapped around by other elements
  • none - remove from a document
<Button button-display='none'>


Set the height

  • auto - value: auto
  • inherit - value: inherit
  • 1-1 - value: 100%
<Button button-height='1-1'>


Set the width

  • auto - value: auto
  • inherit - value: inherit
  • 1-1 - value: 100%
<Button button-width='1-1'>


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' />


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' />


Font weight

  • thin - value: 100
  • light - value: 300
  • normal - value: 400
  • medium - value: 500
  • bold - value: 700
  • black - value: 900
<Button button-weight='normal'>


  • 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'>


  • 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'>


  • auto - Restores item functionality to default.
  • none - Prevents mouse events and clicks on an element.
<Button button-events='none'>


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

Package Sidebar


npm i evokit-button

Weekly Downloads






Unpacked Size

159 kB

Total Files


Last publish


  • docccdev