EvoKit - Button
Just a button <Button>
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