UNPKG

1.03 kBJavaScriptView Raw
1import React from 'react';
2import PropTypes from 'prop-types';
3import classNames from 'classnames';
4import { mapToCssModules, tagPropType } from './utils';
5
6const propTypes = {
7 color: PropTypes.string,
8 pill: PropTypes.bool,
9 tag: tagPropType,
10 innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
11 children: PropTypes.node,
12 className: PropTypes.string,
13 cssModule: PropTypes.object,
14};
15
16const defaultProps = {
17 color: 'secondary',
18 pill: false,
19 tag: 'span'
20};
21
22const Badge = (props) => {
23 let {
24 className,
25 cssModule,
26 color,
27 innerRef,
28 pill,
29 tag: Tag,
30 ...attributes
31 } = props;
32
33 const classes = mapToCssModules(classNames(
34 className,
35 'badge',
36 'badge-' + color,
37 pill ? 'badge-pill' : false
38 ), cssModule);
39
40 if (attributes.href && Tag === 'span') {
41 Tag = 'a';
42 }
43
44 return (
45 <Tag {...attributes} className={classes} ref={innerRef} />
46 );
47};
48
49Badge.propTypes = propTypes;
50Badge.defaultProps = defaultProps;
51
52export default Badge;