# components/BrandMark (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/BrandMark.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrandMark.tsx).

## Components

### `BrandMark`

Component.

Renders a service's logo on a tinted tile, or its icon or first letter when the kit has no logo for it.

```ts
function BrandMark(props: BrandMarkProps): Element
```

**Parameters**

- `props` (`BrandMarkProps`): Component props.

**Returns** `Element`

**Props**

- `brand?` (`string`): The slug of the service's logo (`linear`), as `hasBrandMark` knows it. Absent or unknown: the icon or the letter.
- `className?` (`string`): Extra classes on the tile.
- `decorative?` (`boolean`): The name is written next to the mark, so assistive tech skips it. Set false for a mark that stands alone.
- `icon?` (`string`): An icon class (`i-ph-*`) to show when there is no logo, in place of the letter.
- `label` (`string`): The service's name: the letter when there is no logo, and the image's name when the mark is not decorative.
- `letter?` (`string`): The letter to show when there is neither a logo nor an icon. Absent: the label's first letter.
- `size?` (`BrandMarkSize`): 18, 28 or 40 pixels, or one em (`xs`).
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/BrandMark.tsx:75](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrandMark.tsx#L75)

## Functions

### `hasBrandMark`

Function.

Whether the kit has a logo for a Simple Icons slug.

```ts
function hasBrandMark(brand: string | undefined): boolean
```

**Parameters**

- `brand` (`string | undefined`): The slug, such as `linear`.

**Returns** `boolean`

Source: [ui/src/components/BrandMark.tsx:21](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrandMark.tsx#L21)

## Interfaces

### `BrandMarkProps`

Interface.

Props for [`BrandMark`](https://zidane.si/docs/reference/ui-components-brand-mark.md#BrandMark).

```ts
interface BrandMarkProps
```

**Properties**

- `brand?` (`string`): The slug of the service's logo (`linear`), as `hasBrandMark` knows it. Absent or unknown: the icon or the letter.
- `className?` (`string`): Extra classes on the tile.
- `decorative?` (`boolean`): The name is written next to the mark, so assistive tech skips it. Set false for a mark that stands alone.
- `icon?` (`string`): An icon class (`i-ph-*`) to show when there is no logo, in place of the letter.
- `label` (`string`): The service's name: the letter when there is no logo, and the image's name when the mark is not decorative.
- `letter?` (`string`): The letter to show when there is neither a logo nor an icon. Absent: the label's first letter.
- `size?` (`BrandMarkSize`): 18, 28 or 40 pixels, or one em (`xs`).
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/BrandMark.tsx:51](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrandMark.tsx#L51)

## Types

### `BrandMarkSize`

Type.

The sizes of a mark: 18, 28 or 40 pixels, or `xs`, one em square (an icon's box, as the settings nav draws it).

```ts
type BrandMarkSize = 'xs' | 'sm' | 'md' | 'lg'
```

Source: [ui/src/components/BrandMark.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrandMark.tsx#L14)