Live Docs

Navigation

Brand /

stable

Logo

Brand mark + wordmark Naraya — facet logo deterministik, tersedia sebagai ikon saja atau lengkap dengan wordmark, dalam 5 ukuran.

import { Logo } from "@naraya/ui";

Overview

Logo dipakai di topbar, sidebar, dan footer. Pakai variant="icon" untuk ruang sempit (mobile / collapsed sidebar) dan variant="full" ketika ada ruang untuk wordmark. Varian mono merender satu warna untuk latar berwarna.

Examples

Variants

<Logo variant="icon" />
<Logo variant="full" />

Sizes

<Logo size="xs" />
<Logo size="sm" />
<Logo size="md" />
<Logo size="lg" />
<Logo size="xl" />

Mono

Satu warna — cocok untuk latar solid berwarna.

<Logo variant="full" mono />

Props

PropTypeDefaultDescription
variant"icon" | "full""icon"Mark saja atau mark + wordmark.
size"xs" | "sm" | "md" | "lg" | "xl""md"Ukuran logo.
monobooleanfalseRender satu warna (currentColor).
...restSVGProps<SVGSVGElement>—Props native SVG (kecuali viewBox/children).

Accessibility

  • Mark menyertakan role="img" + aria-label="Naraya" sehingga terbaca screen reader.
  • Pada variant full, wordmark berupa teks asli — jadi tetap terbaca tanpa bergantung pada gambar.
  • Gunakan mono di latar berwarna agar kontras tetap terjaga.