Button

import { FilledButton, OutlinedButton } from "mates-ui";
import { SaveIcon } from "mates-icons";

FilledButton("Save", { icon: SaveIcon(), size: "md" });

// MD3 ripple instead of the default soft bloom:
FilledButton("Save", { enableRipple: true });

// Popup trigger support:
OutlinedButton("Open", {
  panel: PopupList({ items: [{ id: "a", label: "Option A" }] }),
  popup: { position: "bottom-start" },
});

Variants

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

›

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton, HybridButton, TextButton, ElevatedButton, TonalButton, DangerButton } from 'mates-ui';

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

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

${FilledButton("Filled")}

${OutlinedButton("Outlined")}

${HybridButton("Hybrid")}

${TextButton("Text")}

${ElevatedButton("Elevated")}

${TonalButton("Tonal")}

${DangerButton("Danger")}

</x-row>

`;

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

Sizes

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

›

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton, TextButton } from 'mates-ui';

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

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

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

${FilledButton("Filled", { size: "sm" })}

${OutlinedButton("Outlined", { size: "sm" })}

${TextButton("Ghost", { size: "sm" })}

</x-row>

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

${FilledButton("Filled", { size: "md" })}

${OutlinedButton("Outlined", { size: "md" })}

${TextButton("Ghost", { size: "md" })}

</x-row>

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

${FilledButton("Filled", { size: "lg" })}

${OutlinedButton("Outlined", { size: "lg" })}

${TextButton("Ghost", { size: "lg" })}

</x-row>

</x-col>

`;

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

With icons

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

›

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton, TextButton, TonalButton, DangerButton } from 'mates-ui';

import { SaveIcon, DownloadIcon, ShareIcon, DeleteIcon, ArrowForwardIcon, AddIcon, CloudUploadIcon, ContentCopyIcon } from 'mates-icons';

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

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

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

${FilledButton("Save", { icon: SaveIcon() })}

${OutlinedButton("Download", { icon: DownloadIcon() })}

${TextButton("Share", { icon: ShareIcon() })}

${DangerButton("Delete", { icon: DeleteIcon() })}

${OutlinedButton("Next", { trailingIcon: ArrowForwardIcon() })}

</x-row>

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

${OutlinedButton("Add item", { icon: AddIcon(), size: "sm" })}

${TonalButton("Publish", { icon: CloudUploadIcon() })}

${TextButton("Duplicate", { icon: ContentCopyIcon() })}

</x-row>

</x-col>

`;

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

Loading state

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

27

›

⌄

⌄

import { html, renderApp } from 'mates';

import { atom } from 'mates';

import { FilledButton, OutlinedButton, TonalButton, DangerButton } from 'mates-ui';

import { RefreshIcon } from 'mates-icons';

const App = () => {

const loading = atom(false);

return () => html`

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

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

${FilledButton("Saving…", { loading: true })}

${OutlinedButton("Uploading…", { loading: true })}

${TonalButton("Processing", { loading: true })}

${DangerButton("Deleting…", { loading: true })}

</x-row>

<x-row gap="var(--md-space-3)" align="center">

${FilledButton("Click to load", {

icon: RefreshIcon(),

loading: loading(),

on: { click: () => { loading.set(true); setTimeout(() => loading.set(false), 2000); } },

})}

</x-row>

</x-col>

`;

};

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 { FilledButton, OutlinedButton, TextButton, DangerButton } from 'mates-ui';

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

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

${FilledButton("Filled", { disabled: true })}

${OutlinedButton("Outlined", { disabled: true })}

${TextButton("Ghost", { disabled: true })}

${DangerButton("Danger", { disabled: true })}

</x-row>

`;

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

Full width

99

1

2

3

4

5

6

7

8

9

10

11

›

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton } from 'mates-ui';

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

<x-col gap="var(--md-space-3)" style="max-width:24rem;width:100%;">

${FilledButton("Full width filled", { fullWidth: true })}

${OutlinedButton("Full width outlined", { fullWidth: true })}

</x-col>

`;

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

Shapes

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

›

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton, TextButton, DangerButton, TonalButton } from 'mates-ui';

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

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

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

${FilledButton("Rounded", { shape: "rounded" })}

${OutlinedButton("Rounded", { shape: "rounded" })}

${TextButton("Rounded", { shape: "rounded" })}

</x-row>

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

${FilledButton("Square", { shape: "square" })}

${OutlinedButton("Square", { shape: "square" })}

${TextButton("Square", { shape: "square" })}

</x-row>

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

${FilledButton("Pill")}

${OutlinedButton("Pill")}

${TextButton("Pill")}

</x-row>

</x-col>

`;

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

on & onClick

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 { FilledButton, OutlinedButton, TextButton, Alert } from 'mates-ui';

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

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

${FilledButton("onClick", {

onClick: () => Alert("clicked via onClick!"),

})}

${OutlinedButton("on.click", {

on: { click: () => Alert("clicked via on.click!") },

})}

${TextButton("mouseenter", {

on: { mouseenter: () => Alert("mouse entered!") },

})}

</x-row>

`;

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

style & classes

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

›

⌄

⌄

⌄

⌄

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton } from 'mates-ui';

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

<style>

.my-btn-wide [data-name="label"] { letter-spacing: 0.08em; font-weight: 800; }

</style>

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

${FilledButton("Custom radius", {

style: { borderRadius: "var(--md-radius-sm)" },

})}

${FilledButton("Custom color", {

style: { background: "#7c3aed", borderColor: "#7c3aed" },

})}

${OutlinedButton("Wide padding", {

style: { padding: "0 var(--md-space-8)" },

})}

${FilledButton("Bold label", {

classes: "my-btn-wide",

})}

</x-row>

`;

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

attr

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

›

⌄

⌄

import { html, renderApp } from 'mates';

import { FilledButton } from 'mates-ui';

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

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

${FilledButton("With aria-label", {

attr: { "aria-label": "Save document", "data-action": "save" },

})}

${FilledButton("Submit", {

attr: { type: "submit", "data-testid": "submit-btn" },

})}

</x-row>

`;

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

id

9

1

2

3

4

5

6

7

8

›

import { html, renderApp } from 'mates';

import { FilledButton } from 'mates-ui';

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

${FilledButton("Save", { id: "demo-save" })}

`;

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

classes

9

1

2

3

4

5

6

7

8

›

import { html, renderApp } from 'mates';

import { FilledButton } from 'mates-ui';

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

${FilledButton("Full width", { classes: ["full-width"] })}

`;

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

data

99

1

2

3

4

5

6

7

8

9

10

›

⌄

import { html, renderApp } from 'mates';

import { FilledButton } from 'mates-ui';

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

${FilledButton("Save", {

data: { testId: "save-btn", action: "save" },

})}

`;

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

class

99

1

2

3

4

5

6

7

8

9

10

11

12

›

import { html, renderApp } from 'mates';

import { FilledButton, OutlinedButton } from 'mates-ui';

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

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

${FilledButton("Single class", { classes: "my-btn" })}

${OutlinedButton("Multi", { classes: "my-btn my-btn--lg" })}

${FilledButton("Another", { classes: "cls-a cls-b" })}

</x-row>

`;

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

Popup support

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, renderApp } from 'mates';

import { atom } from 'mates';

import { OutlinedButton, PopupList, Text } from 'mates-ui';

const App = () => {

const choice = atom(null);

return () => html`

<x-row gap="var(--md-space-3)" align="center">

${OutlinedButton("File ▾", {

panel: PopupList({

items: [

{ id: "new", label: "New" },

{ id: "open", label: "Open…" },

{ type: "divider", label: "" },

{ id: "save", label: "Save" },

],

onSelect: (_ids, item) => choice.set(item?.id ?? null),

}),

popup: { position: "bottom-start" },

})}

${choice() ? Text(`Selected: ${choice()}`, { type: "body-sm", color: "muted" }) : html``}

</x-row>

`;

};

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

Button group

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

27

28

29

30

31

32

33

34

35

36

›

⌄

⌄

⌄

⌄

import { html, renderApp } from 'mates';

import { atom } from 'mates';

import { ButtonGroup } from 'mates-ui';

import { ViewListIcon, GridViewIcon, TableRowsIcon, FormatBoldIcon, FormatItalicIcon, FormatUnderlinedIcon, FormatAlignLeftIcon, FormatAlignCenterIcon, FormatAlignRightIcon } from 'mates-icons';

const App = () => {

const view = atom("grid");

const range = atom("week");

const format = atom([]);

const align = atom("c");

return () => html`

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

${ButtonGroup(

[

{ label: "List", value: "list", icon: ViewListIcon() },

{ label: "Grid", value: "grid", icon: GridViewIcon() },

{ label: "Table", value: "table", icon: TableRowsIcon(), disabled: true },

],

{ value: view(), onChange: (v) => view.set(v), ariaLabel: "View mode" },

)}

${ButtonGroup(

[

{ label: "Day", value: "day" }, { label: "Week", value: "week" },

{ label: "Month", value: "month" }, { label: "Year", value: "year" },

],

{ variant: "filled", value: range(), onChange: (v) => range.set(v), ariaLabel: "Range" },

)}

${ButtonGroup(

[

{ label: "Bold", value: "bold", icon: FormatBoldIcon() },

{ label: "Italic", value: "italic", icon: FormatItalicIcon() },

{ label: "Underline", value: "under", icon: FormatUnderlinedIcon() },

],

{ mode: "multi", values: format(), onChange: (v) => format.set(v), ariaLabel: "Formatting" },

)}

${ButtonGroup(