# RaftLogo

> The Raft mark, wordmark and lockup as inline SVGs, for brand pages such as sign-in, creating an account or a server, and loading screens.

Source: https://raft-design.botiverse.build/components/logo. Generated from the current release; where it differs from what you remember, this page is right.

raft-ui exports the Raft logo as three inline SVGs: `RaftLogo` (the mark), `RaftWordmark` (the word RAFT) and `RaftLogoLockup` (the two together). They are the website's artwork, copied exactly. Where the logo may appear, and which colors go on which background, is in [Brand](https://raft-design.botiverse.build/foundations/brand.md#logo); the source files and their colors are in [Logos](https://github.com/botiverse/raft-design/blob/main/design/assets/Logos/README.md).

```tsx
import { RaftLogo, RaftLogoLockup, RaftWordmark } from "@botiverse/raft-ui";

export function LogoMarkContent() {
  return <RaftLogo role="img" aria-label="Raft" className="h-20 w-auto" />;
}

export function LogoWordmarkContent() {
  return <RaftWordmark role="img" aria-label="Raft" className="h-12 w-auto max-w-full" />;
}

export function LogoLockupContent() {
  return <RaftLogoLockup role="img" aria-label="Raft" className="h-16 w-auto max-w-full" />;
}
```

## When to use

Where the logo may appear is in [Brand](https://raft-design.botiverse.build/foundations/brand.md#logo) and [Logos](https://github.com/botiverse/raft-design/blob/main/design/assets/Logos/README.md#rules). Once it may appear, pick the export by what it shows:

| Situation                      | Use                                                                                                                              |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| The mark alone                 | `RaftLogo`                                                                                                                       |
| The word alone                 | `RaftWordmark`                                                                                                                   |
| The mark and the word together | `RaftLogoLockup`                                                                                                                 |
| The frame of a working page    | Not the logo: the workspace button or the rail's workspace tile ([Brand](https://raft-design.botiverse.build/foundations/brand.md#principles)) |

## Anatomy

- `RaftLogo`: the mark alone.
- `RaftWordmark`: the letters alone.
- `RaftLogoLockup`: the mark, then the letters.

Each one is an `svg` that keeps its proportions. Set its height with a class and leave the width `auto`. The exports draw the light-background colors of `raft-logo.svg`: an ink outline with a cream inside. raft-ui has no export of the yellow version for dark backgrounds.

## Accessibility

- The SVGs have no name of their own. When the logo stands alone, give it `role="img"` and `aria-label="Raft"`.
- When visible text next to it already says Raft, hide the logo with `aria-hidden`.

## API

### RaftLogo

Also takes the attributes of its element.

### RaftLogoLockup

Also takes the attributes of its element.

### RaftWordmark

Also takes the attributes of its element.

## Changes

- 0.1.0 (Added): Added `ConversationPanel`, `ThreadPanel`, `Panel`, `ScrollArea`, `FilePreview`, `RaftLogo` / lockup / wordmark, and `MobileNav`.