zidanecomponents/BrandMark
import { … } from 'zidane-ui'ui/src/components/BrandMark.tsx
Components#
BrandMarkComponent#
Renders a service's logo on a tinted tile, or its icon or first letter when the kit has no logo for it.
function BrandMark(props: BrandMarkProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | BrandMarkProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| brand? | string | The slug of the service's logo ( |
| 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 ( |
| 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 ( |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
Functions#
hasBrandMarkFunction#
Whether the kit has a logo for a Simple Icons slug.
function hasBrandMark(brand: string | undefined): booleanParameters
| Name | Type | Description |
|---|---|---|
| brand | string | undefined | The slug, such as |
Returns
booleanInterfaces#
BrandMarkPropsInterface#
Props for BrandMark.
interface BrandMarkPropsProperties
| Name | Type | Description |
|---|---|---|
| brand? | string | The slug of the service's logo ( |
| 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 ( |
| 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 ( |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
Types#
BrandMarkSizeType#
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).
type BrandMarkSize = 'xs' | 'sm' | 'md' | 'lg'