khwilo/dev-design-system

Design System example in React

Dev Design System

Example design system in React.

Visit the website at https://design-system-ex.vercel.app/

Getting started

1. Clone this repository

git clone https://github.com/khwilo/design-system.git

2. Run yarn to install project dependencies

3. Run yarn dev to run a local development server

Button

Properties

Property	Description	Type	Required
title	The button text	string	true
variant	The button variant	ButtonVariants	false
disabledShadow	Removes box shadow from the button	boolean	false
disabled	Sets the button to a disabled state	boolean	false
startIcon	Displays an icon to the left of the button title	ButtonIcons	false
endIcon	Displays an icon to the right of the button title	ButtonIcons	false
size	The size of the button	ButtonSizes	false
color	The color of the button	ButtonColors	false
onClickHandler	The button onClick handler function	function	false

Types

Type	Values	Default
ButtonColors	PRIMARY SECONDARY DANGER	DEFAULT
ButtonSizes	SMALL MEDIUM LARGE	MEDIUM
ButtonOutlines	OUTLINE TEXT	NONE
ButtonIcons	LOCAL_GROCERY_STORE	NONE

Input

Properties

Property	Description	Type	Required
id	The input unique id	string	true
name	The input name	string	true
error	The input error	boolean	false
helperText	The input hint	string	false
iconSrc	The input icon source	string	false
startIcon	Absolute position an icon to the left of the input	boolean	false
endIcon	Absolute position an icon to the right of the input	boolean	false
value	The input value	string	true
size	The input field size	InputSizes	false
fullWidth	Make input take the allowed full screen width	boolean	false
disabled	Sets the input to a disabled state	boolean	false
type	The input type	string	true
placeholder	The input placeholder	string	false
onChangeInputHandler	The input onChange input handler	function	true
multiline	Display a textarea	boolean	true
rows	The textarea row number	boolean	true

Types

Type	Values	Default
InputSizes	SMALL MEDIUM	MEDIUM