# Logo

The Zenox and Tellyu brand marks as React components that paint in currentColor.

```tsx
import { ZenoxWordmark } from "@zenoxai/ui/components/logo"

function LogoDemo() {
  return <ZenoxWordmark className="h-6" />
}
```

## Usage

```tsx
import {
  ZenoxMark,
  ZenoxWordmark,
  TellyuMark,
} from "@zenoxai/ui/components/logo"

<ZenoxWordmark className="h-5" />
```

The artwork is official. Read [Brand](/foundations/brand) for colors, clear space and when to
use which mark.

## Examples

### Sizes

Size the wordmark by height and the marks with `size-*`. One class, never width and height
together.

```tsx
import { TellyuMark, ZenoxMark, ZenoxWordmark } from "@zenoxai/ui/components/logo"

function LogoSizes() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      <ZenoxMark className="size-4" />
      <ZenoxMark className="size-6" />
      <ZenoxMark className="size-10" />
      <ZenoxWordmark className="h-4" />
      <ZenoxWordmark className="h-6" />
      <TellyuMark className="size-7" />
    </div>
  )
}
```

### Accessible name

When the mark is the only thing naming the product, pass `title`: the SVG becomes an image with
that name. Without `title` it is decorative and hidden from assistive technology.

```tsx
import { ZenoxWordmark } from "@zenoxai/ui/components/logo"

function LogoAccessibleName() {
  return (
    <a
      href="/"
      className="inline-flex rounded-md p-1 outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
    >
      <ZenoxWordmark title="Zenox home" className="h-6" />
    </a>
  )
}
```

## API reference

`import { ... } from "@zenoxai/ui/components/logo"`

### ZenoxWordmark

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Accessible name. When set, the artwork is announced as an image with this name; when omitted it is decorative and hidden from assistive technology, which is right when visible text beside it already names the product. |

### ZenoxMark

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Accessible name. When set, the artwork is announced as an image with this name; when omitted it is decorative and hidden from assistive technology, which is right when visible text beside it already names the product. |

### TellyuMark

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Accessible name. When set, the artwork is announced as an image with this name; when omitted it is decorative and hidden from assistive technology, which is right when visible text beside it already names the product. |