NavIcon
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.
Installation
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
Requires React 19+, base CSS and a Theme provider. See Setup.
Nav Icon
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.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon * | ReactNode | The icon element to render inside the circular background. Should be an Icon or similar icon component. |
Usage guidance
- 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.
- Avoid: Use NavIcon for interactive purposes; it is a display-only container, not a button.
Theming API
{
"targets": [
{
"className": "astryx-nav-icon"
}
]
}
Anatomy
- Container: Circular painted container for the supplied icon.
- Icon: Caller-supplied visual content rendered inside the container.
Examples
- Nav Icon: Circular icon containers for navigation headers with accent backgrounds.
- NavIcon — Basic: Circular icon containers wrapping semantic icons. Use as logos or accent icons in navigation headers such as TopNavHeading.