Chip

Filter chips

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

›

⌄

⌄

⌄

import { html, atom, renderApp } from 'mates';

import { Chip, Text } from 'mates-ui';

const TAGS = ["Design", "Development", "Research", "UX", "Figma", "TypeScript", "CSS", "Animation"];

const App = () => {

const selected = atom(new Set(["Design"]));

const toggle = (tag) => {

const next = new Set(selected());

next.has(tag) ? next.delete(tag) : next.add(tag);

selected.set(next);

};

return () => html`

<x-col gap="var(--md-space-3)">

<x-row wrap gap="var(--md-space-2)">

${TAGS.map((tag) => Chip(tag, {

selected: selected().has(tag),

on: { click: () => toggle(tag) },

}))}

</x-row>

${Text(`Selected: ${[...selected()].join(", ") || "none"}`, { type: "body-sm", color: "muted" })}

</x-col>

`;

};

renderApp(App, document.getElementById('app'));

---

Tag chips

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

›

import { html, renderApp } from 'mates';

import { Chip } from 'mates-ui';

import { StarIcon } from 'mates-icons';

const App = () => () => html`

<x-row wrap gap="var(--md-space-2)">

${Chip("Active", { variant: "tag", tagColor: "success", dot: true })}

${Chip("Pending", { variant: "tag", tagColor: "warning", dot: true })}

${Chip("Failed", { variant: "tag", tagColor: "error", dot: true })}

${Chip("Draft", { variant: "tag", tagColor: "neutral" })}

${Chip("Primary", { variant: "tag", tagColor: "primary", icon: StarIcon() })}

${Chip("Secondary", { variant: "tag", tagColor: "secondary" })}

${Chip("Tertiary", { variant: "tag", tagColor: "tertiary" })}

${Chip("Removable", { variant: "tag", tagColor: "primary", onRemove: () => {} })}

</x-row>

`;

renderApp(App, document.getElementById('app'));

---

With icons

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

›

import { html, renderApp } from 'mates';

import { Chip } from 'mates-ui';

import { PhotoCameraIcon, MusicNoteIcon, LocationOnIcon, StarIcon, CalendarTodayIcon } from 'mates-icons';

const App = () => () => html`

<x-row gap="var(--md-space-2)" wrap>

${Chip("Camera", { icon: PhotoCameraIcon() })}

${Chip("Music", { icon: MusicNoteIcon(), selected: true })}

${Chip("Location", { icon: LocationOnIcon() })}

${Chip("Star", { icon: StarIcon(), selected: true })}

${Chip("Date", { icon: CalendarTodayIcon() })}

</x-row>

`;

renderApp(App, document.getElementById('app'));

---

Input chips

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

›

⌄

import { html, atom, renderApp } from 'mates';

import { Chip, Text } from 'mates-ui';

const App = () => {

const chips = atom(["JavaScript", "CSS", "HTML"]);

const remove = (label) => chips.set(chips().filter((c) => c !== label));

return () => html`

<x-row wrap gap="var(--md-space-2)">

${chips().map((label) => Chip(label, { variant: "input", onRemove: () => remove(label) }))}

${chips().length === 0

? Text("All chips removed. Refresh to reset.", { type: "body-sm", color: "muted" })

: html``}

</x-row>

`;

};

renderApp(App, document.getElementById('app'));

---

Disabled

99

1

2

3

4

5

6

7

8

9

10

11

12

13

›

import { html, renderApp } from 'mates';

import { Chip } from 'mates-ui';

import { LockIcon } from 'mates-icons';

const App = () => () => html`

<x-row gap="var(--md-space-2)" wrap>

${Chip("Disabled", { disabled: true })}

${Chip("Selected disabled", { disabled: true, selected: true })}

${Chip("Icon disabled", { disabled: true, icon: LockIcon() })}

</x-row>

`;

renderApp(App, document.getElementById('app'));

---

Assist

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

›

import { html, renderApp } from 'mates';

import { Chip } from 'mates-ui';

import { AlarmIcon, EventIcon, SendIcon, ShareIcon } from 'mates-icons';

const App = () => () => html`

<x-row gap="var(--md-space-2)" wrap>

${Chip("Add to calendar", { variant: "assist", icon: EventIcon() })}

${Chip("Set a reminder", { variant: "assist", icon: AlarmIcon() })}

${Chip("Send message", { variant: "assist", icon: SendIcon() })}

${Chip("Share", { variant: "assist", icon: ShareIcon() })}

</x-row>

`;

renderApp(App, document.getElementById('app'));

---

MD3 Ripple (enableRipple)

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

›

import { html, renderApp } from 'mates';

import { Chip } from 'mates-ui';

import { StarIcon, EventIcon } from 'mates-icons';

const App = () => () => html`

<x-row wrap gap="var(--md-space-2)">

${Chip("Filter", { enableRipple: true })}

${Chip("Selected", { selected: true, enableRipple: true })}

${Chip("With icon",{ icon: StarIcon(), enableRipple: true })}

${Chip("Assist", { variant: "assist", icon: EventIcon(), enableRipple: true })}

${Chip("Input", { variant: "input", onRemove: () => {}, enableRipple: true })}

${Chip("Success", { variant: "tag", tagColor: "success", dot: true, enableRipple: true })}

${Chip("Error", { variant: "tag", tagColor: "error", dot: true, enableRipple: true })}

</x-row>

`;

renderApp(App, document.getElementById('app'));