NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identify a section or application.
Preview loads on approachPreview loads on approach
Exact source · nav-icon-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {NavIcon} from '@astryxdesign/core/NavIcon';
import {Icon} from '@astryxdesign/core/Icon';
import {HStack} from '@astryxdesign/core/Layout';
export default function NavIconShowcase() {
return (
<HStack gap={4} vAlign="center">
<NavIcon icon={<Icon icon="search" />} />
<NavIcon icon={<Icon icon="calendar" />} />
<NavIcon icon={<Icon icon="wrench" />} />
</HStack>
);
}
Usage
NavIcon is a circular icon container with an accent-colored background. Use it in navigation headers such as TopNavHeading and PageNavHeader to visually identify a section or application.
Use in navigation headers to provide a recognizable visual anchor for the section.
Pass an Icon or similarly sized icon component to ensure proper proportions.
Use NavIcon for interactive purposes; it is a display-only container, not a button.
Typed props
Prop
Type and behavior
icon
ReactNode · required
The icon element to render inside the circular background. Should be an Icon or similar icon component.
