Ropav

Chip ​

A chip is a small label that stands on its own — a build status, a plan name, a category. It is display only, so if the reader is meant to select it or remove it you want a TagGroup; if it belongs to something else rather than to the flow of the page, you want a Badge.

ts
import { Chip, ChipLabel } from "ropav";
Label
variant
color
size
template
<Chip>
  <ChipLabel>Label</ChipLabel>
</Chip>

With something beside the label ​

ChipLabel carries the text. Text on its own is wrapped for you when the caller is compiled in Vapor mode; with an icon or a dot beside it the label has to be written out, so the examples here always write it.

PassedFlakyFailed
chip-icon.vue
vue
<script setup lang="ts">
import { Chip, ChipLabel } from "ropav";

const runs = [
  { color: "success", label: "Passed" },
  { color: "warning", label: "Flaky" },
  { color: "danger", label: "Failed" },
] as const;
</script>

<template>
  <Chip v-for="run in runs" :key="run.label" :color="run.color" variant="soft">
    <span aria-hidden="true" class="dot" />
    <ChipLabel>{{ run.label }}</ChipLabel>
  </Chip>
</template>

<style scoped>
.dot {
  width: calc(var(--rp-spacing) * 2);
  height: calc(var(--rp-spacing) * 2);
  flex-shrink: 0;
  border-radius: 50%;
  background-color: currentcolor;
}
</style>

bg-current on the dot takes the chip's own text colour, so one class covers all five colours.

Accessibility ​

  • A chip carries no role: it is read as the text it contains, wherever it sits.
  • Colour is the whole of the difference between a passing build and a failing one, so the label has to say which — a red chip reading "Build" tells a reader who cannot see the red nothing at all.
  • A decorative mark beside the label needs aria-hidden, or it is announced as an unlabelled image in the middle of the text.

API ​

Chip

PropTypeDefaultDescription
color"default" | "accent" | "success" | "warning" | "danger""default"Chip color.
size"xs" | "sm" | "md" | "lg"—Chip size.
variant"primary" | "secondary" | "tertiary" | "soft""secondary"Chip variant.

Slots: default.

ChipLabel

Slots: default.