Density

StatusBar

StatusBar uses Base UI’s toolbar primitive for bottom-of-page status surfaces. Density attributes are applied to status bar buttons and inputs.

ConnectedSaved 10:42 AM3 collaborators
import { StatusBar } from "density-base-ui";

export default function StatusBarExample() {
  return (
    <StatusBar.Root aria-label="Document status">
      <span>Connected</span>
      <span>Saved 10:42 AM</span>
      <span>3 collaborators</span>
      <StatusBar.Button type="button">Details</StatusBar.Button>
    </StatusBar.Root>
  );
}

Props

Prop Attribute Values Default
StatusBar.Root density-level data-dn-level 1, 2, 3, 4, 5, 6, 7 3
StatusBar.Root density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
StatusBar.Group None Base UI group props None
StatusBar.Link None Base UI link props None
StatusBar.Separator None Base UI separator props None
StatusBar.Button density-presentation data-dn-presentation button button
StatusBar.Button density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
StatusBar.Button density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
StatusBar.Input density-presentation data-dn-presentation input input
StatusBar.Input density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm

Size

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

const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;

export default function StatusBarSizeExample() {
  return (
    <StatusBar.Root aria-label="Status bar button sizes">
      {sizes.map((size) => (
        <StatusBar.Button key={size} type="button" density-size={size}>
          {size}
        </StatusBar.Button>
      ))}
    </StatusBar.Root>
  );
}