import React from 'react'
import PropTypes from 'prop-types'
import StyledBadge from './badge.styled'
import cx from 'classnames'
const Badge = ({ className, type, size, label, width, prefix, suffix }) => (
<StyledBadge width={width} className={cx({
'badge': true,
'badge-small': (size === 's'),
'badge-medium': (size === 'm'),
'badge-large': (size === 'l')
}, className, type)}
type={type}>
{prefix && <div className='badge-prefix'>{prefix}</div>}
<span className='badge-label'>{label}</span>
{suffix && <div className='badge-suffix'>{suffix}</div>}
</StyledBadge>
)
Badge.propTypes = {
className: PropTypes.string,
label: PropTypes.string.isRequired,
size: PropTypes.oneOf(['s', 'm', 'l']),
type: PropTypes.oneOf([
'primary',
'success',
'warning',
'secondary',
'danger',
'default',
'dark'
]),
width: PropTypes.string,
suffix: PropTypes.node,
prefix: PropTypes.node
}
Badge.defaultProps = {
className: '',
size: 'm',
width: 'full',
type: 'default',
suffix: null,
prefix: null
}
export { Badge }
|