import React from 'react' ; import Label from './Label' ; import LabelState from './LabelState' ; import Flex from './Flex' ; export default { title : 'Design/Label' , } ; export const Labels = ( ) => ( < > < Flex height = "100px" bg = "primary.main" justifyContent = "center" alignItems = "center" > < Label mr = { 4 } kind = "primary" > Primary < /Label> < Label mr = { 4 } kind = "secondary" > Secondary < /Label> < Label mr = { 4 } kind = "warning" > Warning < /Label> < Label kind = "danger" > Danger < /Label> < /Flex> < Flex height = "100px" bg = "primary.main" justifyContent = "center" alignItems = "center" > < LabelState mr = "4" kind = "success" > Success < /LabelState> < LabelState mr = "4" kind = "secondary" > Secondary < /LabelState> < LabelState mr = "4" kind = "warning" > Warning < /LabelState> < LabelState mr = "4" kind = "danger" > Danger < /LabelState> < /Flex> < Flex height = "100px" bg = "primary.main" justifyContent = "center" alignItems = "center" > < LabelState shadow mr = "4" kind = "success" > Success < /LabelState> < LabelState shadow mr = "4" kind = "secondary" > Secondary < /LabelState> < LabelState shadow mr = "4" kind = "warning" > Warning < /LabelState> < LabelState shadow mr = "4" kind = "danger" > Danger < /LabelState> < /Flex> < />);