flyonui/components/badge.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem)*6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex;&.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}&.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:color-mix(in oklab,var(--badge-color,var(--color-neutral))10%,var(--color-base-100));background-image:none}}.badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.badge-xs{--size:calc(var(--size-selector,.25rem)*4);padding-inline:.375rem;font-size:.625rem}.badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5);padding-inline:.5rem}.badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6);padding-inline:.75rem}.badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7);padding-inline:.875rem}.badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8);padding-inline:1rem}@media (width>=640px){.sm\:badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem)*6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex;&.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}&.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:color-mix(in oklab,var(--badge-color,var(--color-neutral))10%,var(--color-base-100));background-image:none}}.sm\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.sm\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.sm\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.sm\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.sm\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.sm\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.sm\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.sm\:badge-xs{--size:calc(var(--size-selector,.25rem)*4);padding-inline:.375rem;font-size:.625rem}.sm\:badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5);padding-inline:.5rem}.sm\:badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6);padding-inline:.75rem}.sm\:badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7);padding-inline:.875rem}.sm\:badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8);padding-inline:1rem}}@media (width>=768px){.md\:badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem)*6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex;&.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}&.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:color-mix(in oklab,var(--badge-color,var(--color-neutral))10%,var(--color-base-100));background-image:none}}.md\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.md\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.md\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.md\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.md\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.md\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.md\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.md\:badge-xs{--size:calc(var(--size-selector,.25rem)*4);padding-inline:.375rem;font-size:.625rem}.md\:badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5);padding-inline:.5rem}.md\:badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6);padding-inline:.75rem}.md\:badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7);padding-inline:.875rem}.md\:badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8);padding-inline:1rem}}@media (width>=1024px){.lg\:badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem)*6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex;&.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}&.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:color-mix(in oklab,var(--badge-color,var(--color-neutral))10%,var(--color-base-100));background-image:none}}.lg\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.lg\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.lg\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.lg\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.lg\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.lg\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.lg\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.lg\:badge-xs{--size:calc(var(--size-selector,.25rem)*4);padding-inline:.375rem;font-size:.625rem}.lg\:badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5);padding-inline:.5rem}.lg\:badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6);padding-inline:.75rem}.lg\:badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7);padding-inline:.875rem}.lg\:badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8);padding-inline:1rem}}@media (width>=1280px){.xl\:badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem)*6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex;&.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}&.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:color-mix(in oklab,var(--badge-color,var(--color-neutral))10%,var(--color-base-100));background-image:none}}.xl\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.xl\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.xl\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.xl\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.xl\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.xl\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.xl\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.xl\:badge-xs{--size:calc(var(--size-selector,.25rem)*4);padding-inline:.375rem;font-size:.625rem}.xl\:badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5);padding-inline:.5rem}.xl\:badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6);padding-inline:.75rem}.xl\:badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7);padding-inline:.875rem}.xl\:badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8);padding-inline:1rem}}@media (width>=1536px){.\32 xl\:badge{border-radius:var(--radius-selector);text-align:center;vertical-align:middle;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));border:var(--border)solid var(--badge-border);width:fit-content;color:var(--badge-fg);background-size:auto,calc(var(--noise)*100%);background-image:none,var(--fx-noise);background-color:var(--badge-bg);--badge-border:var(--badge-color,var(--color-neutral));--badge-bg:var(--badge-color,var(--color-neutral));--badge-fg:var(--color-neutral-content);--size:calc(var(--size-selector,.25rem)*6);height:var(--size);justify-content:center;align-items:center;gap:.375rem;padding-inline:.75rem;display:inline-flex;&.badge-outline{--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:transparent;background-image:none}&.badge-soft{--badge-border:none;--badge-fg:var(--badge-color,var(--color-neutral));--badge-bg:color-mix(in oklab,var(--badge-color,var(--color-neutral))10%,var(--color-base-100));background-image:none}}.\32 xl\:badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.\32 xl\:badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.\32 xl\:badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.\32 xl\:badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.\32 xl\:badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.\32 xl\:badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.\32 xl\:badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.\32 xl\:badge-xs{--size:calc(var(--size-selector,.25rem)*4);padding-inline:.375rem;font-size:.625rem}.\32 xl\:badge-sm{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--size:calc(var(--size-selector,.25rem)*5);padding-inline:.5rem}.\32 xl\:badge-md{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--size:calc(var(--size-selector,.25rem)*6);padding-inline:.75rem}.\32 xl\:badge-lg{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--size:calc(var(--size-selector,.25rem)*7);padding-inline:.875rem}.\32 xl\:badge-xl{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--size:calc(var(--size-selector,.25rem)*8);padding-inline:1rem}}}