الشارات المفرغة والتفاعلية (Outline & Interactive)

أساسي مفرغ ثانوي مفرغ ناجح مفرغ تحذيري مفرغ معلومات مفرغ شارة تفاعلية ← إلغاء ×

Basic badge styling

Primary badge
Primary
Primary To use, add .qhr-badge--primary to the base .qhr-badge class
Secondary badge
Secondary
Secondary To use, add .qhr-badge--secondary to the base .qhr-badge class
Info badge
Info
Info To use, add .qhr-badge--info to the base .qhr-badge class
Success badge
Success
Success To use, add .qhr-badge--success to the base .qhr-badge class
Danger badge
Danger
Danger To use, add .qhr-badge--danger to the base .qhr-badge class
Warning badge
Warning
Warning To use, add .qhr-badge--warning to the base .qhr-badge class
Light badge
Light
Light To use, add .qhr-badge--light to the base .qhr-badge class
Dark badge
Dark
Dark To use, add .qhr-badge--dark to the base .qhr-badge class

Pill

Text 7 +7 -7 10

.qhr-badge--pill applies to .qhr-badge.

Mono colors

Dark Grey Secondary

.qhr-badge--* which * is one of the neutral color names.

Sizing

Extra large Large Medium Small

Available sizes are sm, md, lg, xl

Dot badges

.qhr-badge-dot applies to .qhr-badge or standalone.

Ring badges

.qhr-badge-ring applies ring borders, and .fill can apply solid fill.