Snackbar

Snackbars show short updates about app processes at the bottom of the screen.

Usage

Snackbars show a brief, non-blocking status message about an app process. They render in normal document flow at the call site: fixed/bottom positioning, stacking, and queueing multiple snackbars are the caller’s responsibility.

bash

import { Snackbar } from "@udixio/ui-react"

import { useState } from 'react';
import { Button, Snackbar } from '@udixio/ui-react';

export default function SnackbarBasicReact() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-col items-start gap-4">
      <Button label="Send message" onClick={() => setOpen(true)} />
      <Snackbar
        message="Message sent"
        open={open}
        onOpenChange={setOpen}
      />
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Button, Snackbar } from '@udixio/ui-angular';

@Component({
  selector: 'docs-snackbar-basic-angular',
  standalone: true,
  imports: [Button, Snackbar],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-col items-start gap-4">
      <udx-button label="Send message" (click)="open = true" />
      <udx-snackbar
        message="Message sent"
        [open]="open"
        (openChange)="open = $event"
      />
    </div>
  `,
})
export class SnackbarBasicAngular {
  protected open = false;
}

<script lang="ts">
  import { Button, Snackbar } from '@udixio/ui-svelte';

  let open = $state(false);
</script>

<div class="flex flex-col items-start gap-4">
  <Button label="Send message" onclick={() => (open = true)} />
  <Snackbar message="Message sent" bind:open />
</div>

Auto dismiss

Use duration (ms) to auto-close the snackbar; pass onOpenChange (React), openChange (Angular), or use bind:open (Svelte) to control it.

import { useState } from 'react';
import { Button, Snackbar } from '@udixio/ui-react';

export default function SnackbarAutoDismissReact() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-col items-start gap-4">
      <Button label="Save" onClick={() => setOpen(true)} />
      <Snackbar
        message="Saved"
        duration={3000}
        open={open}
        onOpenChange={setOpen}
      />
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Button, Snackbar } from '@udixio/ui-angular';

@Component({
  selector: 'docs-snackbar-auto-dismiss-angular',
  standalone: true,
  imports: [Button, Snackbar],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-col items-start gap-4">
      <udx-button label="Save" (click)="open = true" />
      <udx-snackbar
        message="Saved"
        [duration]="3000"
        [open]="open"
        (openChange)="open = $event"
      />
    </div>
  `,
})
export class SnackbarAutoDismissAngular {
  protected open = false;
}

<script lang="ts">
  import { Button, Snackbar } from '@udixio/ui-svelte';

  let open = $state(false);
</script>

<div class="flex flex-col items-start gap-4">
  <Button label="Save" onclick={() => (open = true)} />
  <Snackbar message="Saved" duration={3000} bind:open />
</div>

Custom close icon

Provide a custom icon via closeIcon.

import { useState } from 'react';
import { iCheck } from '@udixio/icons-rounded-400/check';
import { Button, Snackbar } from '@udixio/ui-react';

export default function SnackbarCustomIconReact() {
  const [open, setOpen] = useState(false);

  return (
    <div className="flex flex-col items-start gap-4">
      <Button label="Show" onClick={() => setOpen(true)} />
      <Snackbar
        message="Done"
        closeIcon={iCheck}
        open={open}
        onOpenChange={setOpen}
      />
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { iCheck } from '@udixio/icons-rounded-400/check';
import { Button, Snackbar } from '@udixio/ui-angular';

@Component({
  selector: 'docs-snackbar-custom-icon-angular',
  standalone: true,
  imports: [Button, Snackbar],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-col items-start gap-4">
      <udx-button label="Show" (click)="open = true" />
      <udx-snackbar
        message="Done"
        [closeIcon]="closeIcon"
        [open]="open"
        (openChange)="open = $event"
      />
    </div>
  `,
})
export class SnackbarCustomIconAngular {
  protected open = false;
  protected readonly closeIcon = iCheck;
}

<script lang="ts">
  import { iCheck } from '@udixio/icons-rounded-400/check';
  import { Button, Snackbar } from '@udixio/ui-svelte';

  let open = $state(false);
</script>

<div class="flex flex-col items-start gap-4">
  <Button label="Show" onclick={() => (open = true)} />
  <Snackbar message="Done" closeIcon={iCheck} bind:open />
</div>

Controlled state

Use open with onOpenChange (React), openChange (Angular), or bind:open (Svelte) for controlled state; defaultOpen initializes uncontrolled state and defaults to true.