Skip to main content

Dismissible

Dismissible is a wrapper that adds a close button to content, such as a notice or an attachment.

Import

import { Dismissible } from '@vortexlabs/vortex';
import type { DismissibleProps } from '@vortexlabs/vortex';

Other links

Storybook
Your report is ready to download.
"use client";

import { Button, Dismissible, Text } from "@vortexlabs/vortex";
import { useState } from "react";

export const DismissibleUsage = () => {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Dismissible
      closeAriaLabel="Dismiss download notice"
      onClose={() => setVisible(false)}
    >
      <Text>Your report is ready to download.</Text>
    </Dismissible>
  ) : (
    <Button onClick={() => setVisible(true)}>Show notice</Button>
  );
};

Features

  • Supports different button styles, sizes, and shapes.
  • Supports responsive button alignment.
  • Can show the button on hover or focus.
  • Reserves space so content never runs under the button.

Button Styles

plain (default) sits beside the content and reserves space for itself. overlay floats a dark button in the top corner, for images and media; the wrapper shrinks to fit the content.

Your files finished syncing across all devices.
Sydney Harbour
"use client";

import { Button, Dismissible, Image, Stack, Text } from "@vortexlabs/vortex";
import { useState } from "react";

const imgUrl = "https://cdn.vortex.design/docs/components/image/sydney.jpg";

export const DismissibleStyles = () => {
  const [hidden, setHidden] = useState<string[]>([]);
  const hide = (name: string) => setHidden([...hidden, name]);
  return (
    <Stack gap={4} align="start">
      {!hidden.includes("plain") && (
        <Dismissible closeAriaLabel="Dismiss sync notice" onClose={() => hide("plain")}>
          <Text>Your files finished syncing across all devices.</Text>
        </Dismissible>
      )}
      {!hidden.includes("overlay") && (
        <Dismissible
          variant="overlay"
          closeAriaLabel="Remove attached photo"
          onClose={() => hide("overlay")}
        >
          <Image
            src={imgUrl}
            width="200px"
            height="140px"
            borderRadius="md"
            alt="Sydney Harbour"
          />
        </Dismissible>
      )}
      <Button variant="secondary" onClick={() => setHidden([])}>
        Restore
      </Button>
    </Stack>
  );
};

Size and Shape

size controls the close button size and defaults to xs. Add rounded for a circle.

xs rounded close button
sm rounded close button
md rounded close button
"use client";

import { Button, Dismissible, Stack, Text } from "@vortexlabs/vortex";
import { useState } from "react";

export const DismissibleSizes = () => {
  const [hidden, setHidden] = useState<string[]>([]);
  return (
    <Stack gap={4}>
      {(["xs", "sm", "md"] as const)
        .filter((size) => !hidden.includes(size))
        .map((size) => (
          <Dismissible
            key={size}
            size={size}
            rounded
            closeAriaLabel={"Dismiss " + size + " notice"}
            onClose={() => setHidden([...hidden, size])}
          >
            <Text>{size} rounded close button</Text>
          </Dismissible>
        ))}
      <Button variant="secondary" onClick={() => setHidden([])}>
        Restore sizes
      </Button>
    </Stack>
  );
};

Alignment

align="top" (default) centers the button on the first line, using Dismissible's own line height; wrap it in Text of the same size when your content uses a different size. center centers it on the whole content. Both accept breakpoint objects.

Your export is ready
Download the report from the activity page. The link remains available for seven days.
"use client";

import { Button, Dismissible, Stack, Text } from "@vortexlabs/vortex";
import { useState } from "react";

export const DismissibleAlignment = () => {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Dismissible
      align={{ xs: "top", md: "center" }}
      closeAriaLabel="Dismiss export notice"
      onClose={() => setVisible(false)}
    >
      <Stack gap={2}>
        <Text weight="medium">Your export is ready</Text>
        <Text>
          Download the report from the activity page. The link remains available for
          seven days.
        </Text>
      </Stack>
    </Dismissible>
  ) : (
    <Button onClick={() => setVisible(true)}>Show export notice</Button>
  );
};

Hover Visibility

hoverable shows the button on hover or focus. It stays visible on devices without hover.

This project has been archived.
"use client";

import { Button, Dismissible, Text } from "@vortexlabs/vortex";
import { useState } from "react";

export const DismissibleHover = () => {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <Dismissible
      hoverable
      closeAriaLabel="Dismiss archived notice"
      onClose={() => setVisible(false)}
    >
      <Text>This project has been archived.</Text>
    </Dismissible>
  ) : (
    <Button onClick={() => setVisible(true)}>Show archived notice</Button>
  );
};

Without a Close Control

closable={false} hides the button and makes closeAriaLabel and onClose optional. Use it to keep the same layout when some items can't be dismissed.

Your organization manages these settings.
"use client";

import { Dismissible, Text } from "@vortexlabs/vortex";

export const DismissibleHidden = () => {
  return (
    <Dismissible closable={false}>
      <Text>Your organization manages these settings.</Text>
    </Dismissible>
  );
};

Accessibility

Key
Description
EnterSpace
Activate the focused close button.
Provide closeAriaLabel when the button is shown.
If dismissal removes the focused element, move focus to a nearby control.