Aragon Research positions Brightspot in the Leader section of the Aragon Research Globe™ for Content Experience Platforms, 2025

Interactions, buttons, and hover states

Primary Buttons

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Secondary Buttons

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Small Buttons—Primary

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Small Buttons—Secondary

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Text Label with Arrow

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Promo States

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Standard Body Links

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Primary Arrows

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Secondary Arrows

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Disabled Arrows

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Social Bar

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Action Bar

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Accordion Controls

Square - Active (Button)

Componentbutton/primary/square/background
Width, Height141px, 46px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 26px 14px 24px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Square - Active (Button Label)

Componentbutton/primary/square/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Hover (Button)

Componentbutton/primary/square/stroke
Width, Height141px, 46px
Colors#FFFFFF
BordersInside, 1px, #EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 20px 14px;
  padding: 13px 25.5px 14px 24.5px;
  border: solid 1px #ee0120;
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Square - Hover (Button Label)

Componentbutton/primary/square/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Square - Disabled (Button)

Componentbutton/primary/square/background (disabled)
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 16px 0 14px 20px;
  padding: 13px 25.5px 14px 24.5px;
  background-color: var(--utility-f-7-f-7-f-7);
}

HTML

<button></button>

Square - Disabled (Button Label)

Componentbutton/primary/square/background (disabled)
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Active (Button)

Componentbutton/primary/rounded corner/stroke
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 21px 14px 19px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Active (Button Label)

Componentbutton/primary/rounded corner/stroke
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Hover (Button)

Componentbutton/primary/rounded corner/background
Width, Height141px, 46px
Radius5px
Colors#EE0120
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px;
  padding: 13px 25px 14px;
  border-radius: 5px;
  background-color: var(--buttons-links);
}

HTML

<button></button>

Rounded - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}

HTML

<span class="Button-Label">
  Button Label
</span>

Rounded - Disabled (Button)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height141px, 46px
Colors#FFFFFF
Borders#999999
CSS/HTML

CSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 14px 19px;
  padding: 14px 26.5px 14px 23.5px;
  border-radius: 5px;
  border: solid 1px var(--utility-999999);
  background-color: var(--dei-primary-white-ffffff);
}

HTML

<button></button>

Rounded - Disabled (Button Label)

Componentbutton/primary/rounded corner/stroke (disabled)
Width, Height91px, 18px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height18px
TransformTitlecase
Paragraph Spacing10px
Color#999999
CSS/HTML

CSS

.Button-Label {
  width: 91px;
  height: 18px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.13;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}

HTML

<span class="Button-Label">
  Button Label
</span>

P


Pill - Active (Button)

Componentbutton/primary/pill/background
Width, Height141px, 46px
Radius40px
Colors#EE0120
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--buttons-links);
}
HTML

<button></button>

Pill - Active (Button Label)

Componentbutton/primary/pill/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#FFFFFF
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--dei-primary-white-ffffff);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Hover (Button)

Componentbutton/primary/pill/stroke
Width, Height141px, 46px
Radius40px
Colors#EE0120
BordersCenter, 1px
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 20px 0;
  padding: 13px 25px 14px;
  border-radius: 40px;
  border: solid 1px #ee0120;
}
HTML

<button></button>

Pill - Hover (Button Label)

Componentbutton/primary/rounded corner/background
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#EE0120
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: #ee0120;
}
HTML

<span class="Button-Label">
  Button Label
</span>

Pill - Disabled (Button)

Componentbutton/primary/pill/disabled
Width, Height141px, 46px
Colors#F7F7F7
CSS/HTMLCSS

button {
  width: 141px;
  height: 46px;
  margin: 14px 0 0 20px;
  padding: 13px 25px 14px;
  border-radius: 40px;
  background-color: var(--utility-f-7-f-7-f-7);
}
HTML

<button></button>

Pill - Disabled (Button Label)

Componentbutton/primary/pill/disabled
Width, Height91px, 19px
TypefaceRoboto-Bold
Size16px
AlignCenter
Line Height19px
TransformTitlecase
Color#999999
CSS/HTMLCSS

.Button-Label {
  width: 91px;
  height: 19px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: center;
  color: var(--utility-999999);
}
HTML

<span class="Button-Label">
  Button Label
</span>

Browse All Docs

CMS User Guide
Everything you need to know when creating, managing, and administering content within Brightspot CMS.

• Dashboards
• Publishing
• Workflows
• Admin configurations
Developer Guide
A guide for installing, supporting, extending, modifying and administering code on the Brightspot platform.

• Field types
• Content modeling
• Rich-text elements
• Images
Integrations Guide
A guide to configuring Brightspot's library of integrations, including pre-built options and developer-configured extensions.

• Google Analytics
• Shopify
• Apple News
Content Types Guide
Brightspot is packaged with content types that get you up and running in a matter of days, including assets, modules and landing pages.

• Assets
• Modules
• Landing pages
Design System
Our robust, flexible Design System provides hundreds of pre-built components you can use to build the presentation layer of your dreams.

• Asset types
• Module types
• Page types