import React from 'react';
import { Button } from 'light-ui';
// ....
render() {
  return (
  	<Button
    	theme="material" // material, flat, ghost, default material
    	color="dark" // dark, green, blue, red, gray, default green
    	value="button example"
	    disabled={this.props.disabled}
    />
  )
}

import React from 'react';
import { InfoCard, CardGroup } from 'light-ui';
// single info card
render() {
  return (
  	<InfoCard
    	theme="material" // material, flat, ghost, default material
    	mainText="Material Theme"
    	subText="info card example"
    />
  )
}
// info card with intro tipso
render() {
  return (
  	<InfoCard
    	mainText="Material Theme"
    	subText="2017"
    	style={{ textAlign: 'left' }}
    	tipso={{
    		text: 'This is material theme'
    	}}
    />
  )
}
// multiply info cards in group (in one line)
render() {
  return (
  	<CardGroup>
    	<InfoCard
    		mainText="Card Group 1"
    		subText="2017"
    		style={{ textAlign: 'left' }}
    		tipso={{
    			text: 'This card is in group'
    		}}
    	/>
    	<InfoCard
    		mainText="Card Group 2"
    		subText="2017"
    		style={{ textAlign: 'left' }}
    	/>
    </CardGroup>
  )
}
// multiply info cards in group (in multiply lines)
render() {
  return (
  	<CardGroup>
    	<CardGroup>
    		<InfoCard
    			mainText="Card Group 1"
    			subText="2017"
    			tipso={{
    				text: 'This card is in group'
    			}}
    		/>
    		<InfoCard
    			mainText="Card Group 2"
    			subText="2017"
    			style={{ textAlign: 'left' }}
    		/>
    		<InfoCard
                mainText="Card Group 3"
                subText="2017"
            />
    	</CardGroup>
    	<CardGroup>
    		<InfoCard
                mainText="Card Group 4"
                subText="2017"
    		/>
    		<InfoCard
                mainText="Card Group 5"
                subText="2017"
    		/>
    	</CardGroup>
    </CardGroup>
  )
}

import React from 'react';
import { Tipso, Button } from 'light-ui';
// ...
render() {
  return (
  	<Tipso
    	tipsoContent={(
    		<div style={{
    			width: '95px',
    			textAlign: 'center'
    		}}>
    			This is an example
    		</div>
  		)}>
            <Button
              value="hover to show"
            />
	</Tipso>
  )
}
// you can render tipso to any components
// and use any DOM your like to show in tipso
render() {
  return (
  	<Tipso
    	tipsoContent={(<span>tipso example</span>)}
    	trigger="focus" // hover, click, focus, default hover
    >
    	<input placeholder="your need to focus to show tipso" />
    </Tipso>
  )
}

import {} from 'light-ui';
// ...
render() {
  return (
  	<Switcher onChange={this.onChange} checked={props.checked} />
  )
}