Menu
Documentation
v4.0.0-beta.4

Snack

<BaseSnack /> · A small piece of removable info.

View SourceOpen Issue
Label
vue
<template>
  <BaseSnack label="Label" />
</template>

Features

  • Can be used with tag inputs
  • Supports close button
  • Supports icons and images

Anatomy

This is a self closing component that can be used to display a small piece of removable info.

vue
<template>
  <BaseSnack />
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
label
default:""
string

The text to display in the snackbar.

icon
default:-
string

An optional icon to display in the snackbar.

image
default:-
string

An optional image to display in the snackbar.

variant
default:"default"
"default" | "primary" | "dark" | "none" | "muted"

The variant of snack.

size
default:"md"
"md" | "xs" | "sm"

The size of the snack.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Event Emitted Value Type
delete
[]
Slot Type
#default
any
#icon
any

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Tag default variables */
  --color-tag-default-bg: var(--color-white);
  --color-tag-default-border: var(--color-muted-400);
  --color-tag-default-text: var(--color-muted-400);

  /* Tag muted variables */
  --color-tag-muted-bg: var(--color-muted-400);
  --color-tag-muted-border: var(--color-muted-400);
  --color-tag-muted-text: var(--color-muted-400);

  /* Tag dark variables */
  --color-tag-dark-bg: var(--color-muted-900);
  --color-tag-dark-border: var(--color-muted-900);
  --color-tag-dark-text: var(--color-muted-900);
}

Examples

Size

Use the size prop to change size of the snack.

Label
Label
Label
vue
<template>
  <BaseSnack label="React" color="default" size="xs" />
  <BaseSnack label="Angular" color="default" size="sm" />
  <BaseSnack label="Vue" color="default" size="md" />
</template>

Variants

Use the variant prop to change color of the snack. Set it to none to remove the default color and apply your own.

Label
Label
Label
Label
vue
<template>
  <BaseSnack
    label="Label"
    variant="default"
  />
  <BaseSnack
    label="Label"
    variant="muted"
  />
  <BaseSnack
    label="Label"
    variant="dark"
  />
  <BaseSnack
    label="Label"
    variant="none"
    class="text-primary-600 bg-primary-500/10 ring-1 ring-primary-600"
  />
</template>

Icon

Use the icon prop to display an icon inside the snack.

React
Angular
Vue
vue
<template>
  <BaseSnack
    label="React"
    variant="default"
    icon="logos:react"
  />
</template>

Image

Use the image prop to display an image inside the snack.

Mike
Maya
John
vue
<template>
  <BaseSnack
    label="Mike"
    variant="default"
    size="xs"
    image="/img/people/19.jpg"
  />
</template>

Slider

Switch Ball