Skip to content
Components

Logo

Brand mark. Renders the Material Bank logo by default; pass mark (and label) to show your own. Uses currentColor for fill, so colour can be controlled via text-* classes.

Usage

import { Logo } from "@instruments/materia-ui/components/logo";

Best practices

  • Recolour the mark with a text-* class - it fills from currentColor; passing fill/a hex defeats the single-source colour and breaks dark-mode inheritance.

  • Size with the size preset (sm–xl), not a className width/height - presets keep the mark on the shared ComponentSize scale.

  • Don't add your own aria-label/role - Logo already ships role="img" + "Material Bank" (change the name with label); wrap it in a link only when you need a click target.

  • To use your own brand, pass mark as SVG shapes in a 48x48 viewBox filled with currentColor, and a matching label - don't wrap or overlay the default mark.

Props

PropTypeDefaultDescription
labelstring"Material Bank"

Accessible name announced for the mark. Set it when you replace mark.

markReactNodethe Material Bank mark

Replaces the Material Bank mark: SVG shapes (<path>, <g>…) drawn in a 48x48 viewBox that fill from currentColor, rendered inside the Logo <svg> so size and text-* colour classes keep working.

sizeLogoSize

Size preset

Composition

Used by

MobileNavigationRoot