Primitives

Chip

Tag / chip, optionally dismissible. The dismiss glyph ships with the component; the four libraries name its event differently.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

design tokens css a11y small

designtokenscssa11ysmall

design tokens css a11y small

designtokenscssa11ysmall

Code

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);">
  <span class="aura-chip">design
  <button type="button" class="aura-chip__remove" aria-label="Remove design">
    <svg viewBox="0 0 8 8" aria-hidden="true">
      <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
    </svg>
  </button>
</span>
<span class="aura-chip">tokens
<button type="button" class="aura-chip__remove" aria-label="Remove tokens">
  <svg viewBox="0 0 8 8" aria-hidden="true">
    <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
  </svg>
</button>
</span>
<span class="aura-chip">css
<button type="button" class="aura-chip__remove" aria-label="Remove css">
  <svg viewBox="0 0 8 8" aria-hidden="true">
    <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
  </svg>
</button>
</span>
<span class="aura-chip">a11y
<button type="button" class="aura-chip__remove" aria-label="Remove a11y">
  <svg viewBox="0 0 8 8" aria-hidden="true">
    <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
  </svg>
</button>
</span>
<span class="aura-chip aura-chip--sm">small</span>
</div>

Demo.tsx

import { useState } from 'react';
import { Chip, Group, Typography } from '@ilomee/aura-react';

export default function Demo() {
  const [tags, setTags] = useState(['design', 'tokens', 'css', 'a11y']);

  return (
    <Group>
      {tags.map((tag) => (
        <Chip key={tag} removable removeLabel={`Remove ${tag}`} onRemove={() => setTags((t) => t.filter((x) => x !== tag))}>
          {tag}
        </Chip>
      ))}
      <Chip size="sm">small</Chip>
      {tags.length === 0 && (
        <Typography variant="caption" tone="faint">
          All removed — reload to reset.
        </Typography>
      )}
    </Group>
  );
}

Demo.vue

<script setup lang="ts">
import { Chip } from '@ilomee/aura-vue';
</script>

<template>
  <Chip removable @remove="drop('ai')">ai</Chip>
</template>

Demo.svelte

<script lang="ts">
  import { Chip } from '@ilomee/aura-svelte';
</script>

<Chip removable onremove={() => drop('ai')}>ai</Chip>

Used as aura-chip.

demo.component.ts

import { AuraChip } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraChip],
  template: `<aura-chip [removable]="true" (remove)="drop('ai')">ai</aura-chip>`,
})
export class DemoComponent {}

A component (<aura-chip>), not a directive — unlike most of the Angular package.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
onRemove	`() => void`	—	Fired by the dismiss button.
removeLabel	`string`	`'Remove'`	Accessible label for the dismiss button.

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
removeLabel	`string`	`'Remove'`
removeevent	`() => void`	—	Emitted by the dismiss button.

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
removeLabel	`string`	`'Remove'`
onremove	`() => void`	—	Callback prop — not an event.

Name	Type	Default
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
removeLabel	`string`	`'Remove'`
removeevent	`EventEmitter<void>`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-chip	base	Required. A modifier does nothing without it.
.aura-chip--sm	modifier
.aura-chip__remove	element

Tokens and rules

components.css

padding: 7px 12px · literal
radius: 999px · literal
font: 600 12.5px var(--font)
border: 1px solid var(--border)
hover: var(--accent)
remove: 15×15 · var(--danger) на hover