email-label.css

email-label {
  display: block;
  padding: 10px 0;
}

email-label .email-label__container {
  display: flex;
}

email-label .email-label__name {
  color: #a0adb8;
  margin: 0;
  padding: 2px 15px;
}

email-label .email-label__circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border-width: 3px;
  border-style: solid;
  margin: 0;
}

.email-label--color-ff7b6d {
  border-color: #ff7b6d;
}

.email-label--color-05bf80 {
  border-color: #05bf80;
}

.email-label--color-c76bef {
  border-color: #c76bef;
}

email-label.tsx

import { Component, Prop } from '@stencil/core';

@Component({
    tag: 'email-label',
    styleUrl: 'email-label.css'
})
export class EmailLabel {

    @Prop() labelName: string;
    @Prop() labelColor: string;

    render() {
        return (
            <div class="email-label__container">
              <p class={"email-label__circle email-label--color-" + this.labelColor}></p>
              <p class="email-label__name">{this.labelName}</p>
            </div>
        );
    }
}