TagLabel.js

import PropTypes from 'prop-types';
import React from 'react';
import { Glyphicon, Label } from 'react-bootstrap';

/** React component which renders a tag label */
class TagLabel extends React.Component {
  render() {
    const { tag, showDeleteButton } = this.props;

    return (
      <div style={{ display: 'inline-block', marginRight: 4 }}>
        <p>
          <Label
            style={{
              backgroundColor: tag.color,
            }}
          >
            <Glyphicon glyph="tag" />
            {tag.name.toUpperCase()}
          </Label>
        </p>

        {showDeleteButton && (
          <Label
            style={{
              backgroundColor: '#777',
              borderTopLeftRadius: 0,
              borderTopRightRadius: 5,
              borderBottomRightRadius: 5,
              borderBottomLeftRadius: 0,
              display: 'inline-block',
              marginBottom: 2,
              paddingLeft: 0,
              paddingRight: 1,
            }}
          >
            <Glyphicon
              glyph="remove"
              bsSize="xsmall"
              style={{
                backgroundColor: '#777',
                color: 'white',
                verticalAlign: 'bottom',
              }}
              onClick={() => this.props.onDeleteTagClicked(tag)}
            />
          </Label>
        )}
      </div>
    );
  }
}

TagLabel.propTypes = {
  /* Callback function used to remove a tag from the selection. Used in EVENT context only */
  onDeleteTagClicked: PropTypes.func,
  /* Whether the delete button is displayed or not */
  showDeleteButton: PropTypes.bool,
  /* the tag to render */
  tag: PropTypes.object.isRequired,
};

TagLabel.defaultProps = {
  showDeleteButton: false,
};

export default TagLabel;