CSS: pill

.instui-pill — Una etiqueta d'estat compacta; afegiu un glif inicial amb la forma compartida -icon-<name>.

A diferència de badge, que mostra un comptador, o de tag, que és eliminable, la pastilla és una etiqueta d'estat estàtica; el seu glif inicial és un ::before enmascarat, no un <img>.

Source: pill.css

Ús

@import "@pantoken/components/components.css";
@import "@pantoken/components/pill.css";

Exemples

<div class="instui-view --display-flex --gap-md">
  <span class="instui-pill -color-success -icon-check">Publicat</span>
  <span class="instui-pill">Esborrany</span>
  <span class="instui-pill -color-info">En revisió</span>
  <span class="instui-pill -color-warning">Obsolet</span>
  <span class="instui-pill -color-danger">Bloquejat</span>
  <span class="instui-pill -color-violet">Pastís</span>
</div>

Modificadors

Modificador	Descripció
.-color-aurora	Estat d'error.
.-color-danger	Estat d'error.
.-color-info	Estat informatiu.
.-color-neutral	Estat informatiu.
.-color-orange	Color de la paleta Orange.
.-color-plum	Estat d'accent pruna.
.-color-sea	Estat d'accent marí.
.-color-sky	Estat d'accent cel.
.-color-stone	Estat d'advertència.
.-color-success	Estat positiu.
.-color-violet	Estat d'accent violeta.
.-color-warning	Estat d'advertència.
.-icon-*	Un glif inicial del conjunt d'icones (p. ex. -icon-check), pintat abans de l'etiqueta.
.-size-large	El número mètric gran.
.-size-medium	(per defecte) mida mitjana.
.-size-x-small	La mida de pastilla més petita.

Pseudoelements

Pseudoelement	Descripció
::before	El glif icona inicial, dimensionat i espaiat respecte a la pastilla.

Tokens consumits

Token	Tipus	Valor
--instui-component-pill-aurora-background-color	<color>	LightDarklight-dark(#C8F3DF, #01442F)
--instui-component-pill-aurora-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-aurora-text-color	<color>	LightDarklight-dark(#007352, #2BC692)
--instui-component-pill-base-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-base-text-color	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-component-pill-border-radius	<length>	999rem
--instui-component-pill-border-style	—	solid
--instui-component-pill-border-width	<length>	0.0625rem
--instui-component-pill-error-background-color	<color>	#E62429
--instui-component-pill-error-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-error-text-color	<color>	#ffffff
--instui-component-pill-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-pill-gap-content	<length>	0.125rem
--instui-component-pill-gap-icon-label	<length>	0.25rem
--instui-component-pill-gap-icon-label-large	<length>	0.5rem
--instui-component-pill-gap-icon-label-medium	<length>	0.5rem
--instui-component-pill-height	<length>	1.5rem
--instui-component-pill-height-large	<length>	2rem
--instui-component-pill-height-medium	<length>	1.75rem
--instui-component-pill-height-x-small	<length>	1.25rem
--instui-component-pill-info-background-color	<color>	LightDarklight-dark(#DEEBFF, #123E62)
--instui-component-pill-info-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-info-text-color	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-pill-line-height	<length>	0.875rem
--instui-component-pill-max-width	<length>	240px
--instui-component-pill-neutral-background-color	<color>	LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-pill-orange-background-color	<color>	LightDarklight-dark(#FFE4D7, #682400)
--instui-component-pill-orange-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-orange-text-color	<color>	LightDarklight-dark(#B23F01, #FF905A)
--instui-component-pill-padding-horizontal	<length>	0.5rem
--instui-component-pill-padding-horizontal-large	<length>	0.75rem
--instui-component-pill-padding-horizontal-medium	<length>	0.75rem
--instui-component-pill-padding-vertical	<length>	0.25rem
--instui-component-pill-plum-background-color	<color>	LightDarklight-dark(#FAE3EF, #651E4C)
--instui-component-pill-plum-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-plum-text-color	<color>	LightDarklight-dark(#A83780, #EC93C6)
--instui-component-pill-sea-background-color	<color>	LightDarklight-dark(#CFF0F6, #00424A)
--instui-component-pill-sea-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-sea-text-color	<color>	LightDarklight-dark(#02717E, #3CC0D4)
--instui-component-pill-sky-background-color	<color>	LightDarklight-dark(#D6EDFE, #084059)
--instui-component-pill-sky-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-sky-text-color	<color>	LightDarklight-dark(#116D94, #63B9EB)
--instui-component-pill-status-label-font-weight	<integer>	400
--instui-component-pill-stone-background-color	<color>	LightDarklight-dark(#E9E9E9, #3A3A3A)
--instui-component-pill-stone-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-stone-text-color	<color>	LightDarklight-dark(#646464, #AFAFAF)
--instui-component-pill-success-background-color	<color>	LightDarklight-dark(#CAF4D0, #01451B)
--instui-component-pill-success-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-success-text-color	<color>	LightDarklight-dark(#017533, #61C378)
--instui-component-pill-text-font-size	<length>	0.75rem
--instui-component-pill-text-font-size-large	<length>	1rem
--instui-component-pill-text-font-size-medium	<length>	0.875rem
--instui-component-pill-text-font-weight	<integer>	400
--instui-component-pill-violet-background-color	<color>	LightDarklight-dark(#F3E5F7, #522965)
--instui-component-pill-violet-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-violet-text-color	<color>	LightDarklight-dark(#8A49A7, #CAA1D9)
--instui-component-pill-warning-background-color	<color>	LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-pill-warning-border-color	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-warning-text-color	<color>	LightDarklight-dark(#664800, #E0A300)
--instui-font-size-text-xs	<length>	0.75rem

Relacionat

• badge — Un badge és la contraparte que mostra el recompte o la notificació.
• tag — Una tag és la contraparte extraïble, orientada a formularis.