Density

Close

Close renders Density’s custom X SVG in a square Button with a default accessible name of “Close”. It has a full radius by default.

import { Close } from "density-base-ui";

export default function CloseExample() {
  return <Close size="lg" />;
}

Close always uses a square shape. It does not accept children or square.

Size

Close sizes use the shared Density control scale: 2xs, xs, sm, md, lg, xl, 2xl, and 3xl.

import { Close, View } from "density-base-ui";

export default function CloseSizeExample() {
  return (
    <View orientation="horizontal" padding={false} wrap>
      <Close size="2xs" />
      <Close size="xs" />
      <Close size="sm" />
      <Close size="md" />
      <Close size="lg" />
      <Close size="xl" />
      <Close size="2xl" />
      <Close size="3xl" />
    </View>
  );
}

Shape

Close is round by default. Set radius="none" for square corners.

import { Close, View } from "density-base-ui";

export default function CloseShapeExample() {
  return (
    <View orientation="horizontal" padding={false}>
      <Close aria-label="Round close button" />
      <Close aria-label="Square close button" radius="none" />
    </View>
  );
}