Chips & Tags

Small labels for status, categories, and selections.

Tags

Static labels for status or categories.

<span class="sw-tag">Default</span>
<span class="sw-tag sw-tag-success">Success</span>
<span class="sw-tag sw-tag-warning">Warning</span>
<span class="sw-tag sw-tag-danger">Danger</span>

Chips

Interactive, selectable elements.

<span class="sw-chip">React</span>
<span class="sw-chip sw-chip-selected">Astro</span>

CSS

/* Tags */
.sw-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--sw-gray-100);
  border-radius: var(--sw-radius-md);
  font-size: var(--sw-text-xs);
  font-weight: var(--sw-font-medium);
  color: var(--sw-text-secondary);
}

.sw-tag-success {
  background: var(--sw-success-bg);
  color: var(--sw-success);
}

.sw-tag-warning {
  background: var(--sw-warning-bg);
  color: var(--sw-warning-text);
}

.sw-tag-danger {
  background: var(--sw-danger-bg);
  color: var(--sw-danger);
}

/* Chips */
.sw-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--sw-bg-selected);
  border: 1px solid var(--sw-border-default);
  border-radius: var(--sw-radius-lg);
  font-size: var(--sw-text-md);
  color: var(--sw-text-secondary);
  cursor: pointer;
  transition: all var(--sw-transition-fast);
}

.sw-chip:hover {
  background: var(--sw-bg-hover);
  border-color: var(--sw-border-hover);
}

.sw-chip-selected {
  background: var(--sw-primary);
  border-color: var(--sw-primary);
  color: var(--sw-text-inverse);
}