Button

Button is just a wrapper around the native button element to privide convinient for styling.

Installation

npm install --save @gladio/button

Usage

import Button from '@gladio/button'
function App () {
  return <Button>Submit</Button>
}

Hierarchy and Semantics/Colors

Button component has two main type of props that changes the visual representation: Hierarchy(Order) and Semantics (Colors). We can use a combination of these two type of attributes of our purpose.

Hierarchy

We have three levels for hierarchy: primary, secondary and tertiary. Hierarchy decides which button should be more prominent. You can pass one of these as booleans.

Code Editor

Semantics/Colors

Semantics add the state/meaning of the type of the action a button represents. We have following semantics/colors modifiers that can be used to change the apperance: branded, success, danger, warning and accent. Any of these can be passed as a boolean props to apply styles for it.

Code Editor

All type="submit" buttons are default to primary and branded states which can be overwritten.

Playground

Play will all the props here.

Code Editor