Badges
Badges are used to display status or contextual information to the user, such as neutral, success, warning, error, or info states.
Neutral
Neutral badges are used to indicate a neutral state or status to the user, without implying success, warning, error, or informational context.
<div class="corn-badge">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[neutral icon]"></use></svg>
</div>
<div class="corn-badge--content">neutral</div>
</div>Informational
Informational badges are used to convey information to the user that does not indicate success, warning, or error, but provides context or guidance.
<div class="corn-badge corn-badge--info">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[info icon]"></use></svg>
</div>
<div class="corn-badge--content">info</div>
</div>Success
Success badges are used to indicate to the user that an action or state has completed successfully, or that the status being conveyed is positive or successful.
<div class="corn-badge corn-badge--success">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[success icon]"></use></svg>
</div>
<div class="corn-badge--content">success</div>
</div>Warning
Warning badges are used to indicate to the user that there is a potential issue or cautionary state that they should be aware of, without indicating an error or failure.
<div class="corn-badge corn-badge--warning">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[warning icon]"></use></svg>
</div>
<div class="corn-badge--content">warning</div>
</div>Error
Error badges are used to indicate to the user that an action has failed, an error has occurred, or that the status being conveyed represents a negative or erroneous state.
<div class="corn-badge corn-badge--error">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[error icon]"></use></svg>
</div>
<div class="corn-badge--content">error</div>
</div>Small Badges
Small badges are used to display compact status indicators that do not require additional context or information. They are typically used for simple notifications or alerts.
Small Neutral
<div class="corn-badge corn-badge--sm">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[neutral icon]"></use></svg>
</div>
<div class="corn-badge--content">neutral</div>
</div>Small Informational
<div class="corn-badge corn-badge--info corn-badge--sm">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[info icon]"></use></svg>
</div>
<div class="corn-badge--content">info</div>
</div>Small Success
<div class="corn-badge corn-badge--success corn-badge--sm">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[success icon]"></use></svg>
</div>
<div class="corn-badge--content">success</div>
</div>Small Warning
<div class="corn-badge corn-badge--warning corn-badge--sm">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[warning icon]"></use></svg>
</div>
<div class="corn-badge--content">warning</div>
</div>Small Error
<div class="corn-badge corn-badge--error corn-badge--sm">
<div class="corn-badge--status">
<svg xmlns="http://www.w3.org/2000/svg" class="corn-icon" aria-hidden="true"><use href="[error icon]"></use></svg>
</div>
<div class="corn-badge--content">error</div>
</div>Badge Tokens
:root {
--cc-badge--border--radius: 1rem;
--cc-badge--border--width: var(--cc-border--width);
--cc-badge--border--style: var(--cc-border--style);
--cc-badge--border--color: rgb(from var(--cc-border--color) r g b / 21%);
--cc-badge--padding: var(--cc-size--5) var(--cc-size--1);
--cc-badge--padding--sm: var(--cc-size--5) var(--cc-size--3);
--cc-badge--background: var(--cc-gray-10);
--cc-badge--status--border--radius: var(--cc-border--radius--round);
--cc-badge--status--color: var(--cc-gray-80);
--cc-badge--status--border--color: var(--cc-badge--border--color);
--cc-badge--status--border--style: var(--cc-border--style);
--cc-badge--status--border--width: var(--cc-border--width);
--cc-badge--success--background: var(--cc-status--success--background);
--cc-badge--success--color: var(--cc-status--success--color);
--cc-badge--success--border--color: var(--cc-status--success--border-color);
--cc-badge--warning--background: var(--cc-status--warning--background);
--cc-badge--warning--color: var(--cc-status--warning--color);
--cc-badge--warning--border--color: var(--cc-status--warning--border-color);
--cc-badge--error--background: var(--cc-status--error--background);
--cc-badge--error--color: var(--cc-status--error--color);
--cc-badge--error--border--color: var(--cc-status--error--border-color);
--cc-badge--info--background: var(--cc-status--info--background);
--cc-badge--info--color: var(--cc-status--info--color);
--cc-badge--info--border--color: var(--cc-status--info--border-color);
}