Button

example

code

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" />

<button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  kick
</button>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" disabled />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" disabled />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" disabled />

<button
  class="CharcellButton CharcellButton--boxed CharcellButton--interactive"
  disabled
  type="button"
>
  kick
</button>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" variant="dense" />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" variant="dense" />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" variant="dense" />

<button
  class="CharcellButton CharcellButton--dense CharcellButton--interactive"
  type="button"
>
  kick
</button>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" nonInteractive />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" nonInteractive />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" nonInteractive />

<span class="CharcellButton CharcellButton--boxed">kick</span>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" border="none" />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" border="none" />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" border="none" />

<button
  class="CharcellButton CharcellButton--border-top-none CharcellButton--border-end-none CharcellButton--border-bottom-none CharcellButton--border-start-none CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  kick
</button>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" border="rounded" />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" border="rounded" />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" border="rounded" />

<button
  class="CharcellButton CharcellButton--border-top-rounded CharcellButton--border-end-rounded CharcellButton--border-bottom-rounded CharcellButton--border-start-rounded CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  kick
</button>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" border="heavy" />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" border="heavy" />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" border="heavy" />

<button
  class="CharcellButton CharcellButton--border-top-heavy CharcellButton--border-end-heavy CharcellButton--border-bottom-heavy CharcellButton--border-start-heavy CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  kick
</button>

import { Button } from 'charcell/react';

export function ButtonExample() {
  return <Button label="kick" border="double" />;
}

<script setup lang="ts">
import { Button } from 'charcell/vue';
</script>

<template>
  <Button label="kick" border="double" />
</template>

<script lang="ts">
  import { Button } from 'charcell/svelte';
</script>

<Button label="kick" border="double" />

<button
  class="CharcellButton CharcellButton--border-top-double CharcellButton--border-end-double CharcellButton--border-bottom-double CharcellButton--border-start-double CharcellButton--boxed CharcellButton--interactive"
  type="button"
>
  kick
</button>

as text

at rest

┌──────┐
│ kick │
└──────┘

hover

┌──────┐
│ kick │
└──────┘

press

┌──────┐
│ kick │
└──────┘

focus

┌──────┐
│❯kick │
└──────┘

props

labelstring: The button's text, ahead of anything in the default slot.
variant'boxed' | 'dense'= 'boxed': boxed draws the ring around the label; dense is one bare 16px row with no stroke, which misses WCAG 2.5.8's 24px target; boxed meets it.
type'button' | 'submit' | 'reset'= 'button': The native button type: only an explicit 'submit' or 'reset' acts on a form.
nonInteractiveboolean: Renders an inert <span> with the button's look, for a label that does nothing.
border'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of every side of the boxed ring: single, rounded, heavy, double or none.
borderX'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed ring's start and end sides, over border.
borderY'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed ring's top and bottom sides, over border.
borderTop'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed ring's top side, over borderY and border.
borderEnd'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed ring's end side, over borderX and border.
borderBottom'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed ring's bottom side, over borderY and border.
borderStart'none' | 'single' | 'rounded' | 'heavy' | 'double': The style of the boxed ring's start side, over borderX and border.
onClick(event: MouseEvent) => void: Called with the click event.

it also takes any other attribute of its <button>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

default: Content after label, or the button's whole content without one.

usage

example

code

as text

props

slots