Brand

# Brok UI: Brand (`brand`)

The mark + wordmark lockup a header, footer or auth screen leads with: a filled tile carrying the first letter (or an icon/logo slot) beside the name, as a link or a plain group, in three sizes and two shapes.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add brand
```

## Usage

```blade
<x-ui.brand :label="__('Acme')" href="#" />
```

## Props

- `label` (string, default `Acme`) — The wordmark text; also the link's accessible name.
- `href` (string|null, default `null`) — Renders the lockup as an `<a>` when set; a plain `<div>` group otherwise.
- `glyph` (string|null, default `null`) — The character in the mark. Defaults to the first letter of `label`.
- `size` ('sm'|'md'|'lg', default `md`) — Scales the mark, its glyph and the wordmark together: 24/32/40px marks.
- `shape` ('square'|'pill', default `square`) — Rounds the mark as a square (control radius) or a pill.
- `collapse` (bool, default `false`) — Hides the wordmark visually below the `sm` breakpoint while keeping it for assistive technology.
- `hideLabel` (bool, default `false`) — Shows the mark alone; the label stays as the accessible name.
- `as` ('div'|'span', default `div`) — The group element when there is no `href`; `span` for a lockup inside phrasing content such as a sheet title.

## Use when

- Use to orient users and help them move across pages, sections, or commands.
- A header, footer, auth screen or navbar needs the product name with its mark, linking home.
- The consumer will replace the mark with their own logo — the `logo` slot is the one edit point.

## Avoid when

- Do not hide primary wayfinding in novelty interactions or deep nested structures if straightforward navigation would be clearer.
- A row of third-party logos (customers, partners) — use `logo-cloud` blocks or `social-links`.
- A person, not a product — use `avatar` or `user-identity`.

## Anti-patterns

- Hiding primary wayfinding in novelty interactions

## Rules

- Use the `<brok:brand>` tag (or `<x-ui.brand>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/brand
- Registry JSON (files, props, contract): https://brokui.dev/r/open/brand.json

{{--
    Brand — the mark + wordmark lockup a header, footer or auth screen leads
    with, and the first thing a consumer replaces, so it lives in one place.

    The mark is a filled tile carrying the first letter of the label (or the
    `glyph` prop); drop an inline <svg> in the `icon` slot to draw a symbol
    inside the tile, or hand the whole mark over with the `logo` slot (an
    <img>, a wordmark SVG) and the tile is not drawn at all.

    `href` makes the lockup a link; without one it is a plain group. `size`
    scales the tile, its glyph and the wordmark together; `shape` rounds the
    tile as a square or a pill. `collapse` keeps the wordmark for assistive
    technology but hides it visually below the `sm` breakpoint, for a narrow
    top bar that only has room for the mark. `hide-label` leaves the mark
    alone and names the link for AT. Without `href` the lockup is a `div`,
    or a `span` (`as="span"`) inside phrasing content such as a heading.
--}}
@props([
    'label' => 'Acme',
    'href' => null,
    'glyph' => null,
    'size' => 'md',
    'shape' => 'square',
    'collapse' => false,
    'hideLabel' => false,
    // Without `href`: the group element, `div` (default) or `span` for a
    // lockup inside phrasing content such as a sheet title.
    'as' => 'div',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $recipe = $styles['brand'] ?? [];

    $size = array_key_exists($size, $recipe['sizes'] ?? []) ? $size : 'md';
    $shape = array_key_exists($shape, $recipe['shapes'] ?? []) ? $shape : 'square';
    $sizes = $recipe['sizes'][$size] ?? [];
    $collapse = filter_var($collapse, FILTER_VALIDATE_BOOLEAN);
    $hideLabel = filter_var($hideLabel, FILTER_VALIDATE_BOOLEAN);

    $tag = $href !== null ? 'a' : (in_array($as, ['div', 'span'], true) ? $as : 'div');
    $glyph = $glyph !== null && $glyph !== '' ? $glyph : mb_substr((string) $label, 0, 1);

    $radius = $shape === 'pill' ? ($recipe['shapes']['pill'] ?? 'rounded-full') : ($sizes['squareRadius'] ?? 'rounded-md');
    $markClass = trim(($recipe['mark'] ?? '').' '.$radius.' '.($sizes['mark'] ?? ''));
    $rootClass = trim(($recipe['base'] ?? '').' '.($sizes['root'] ?? '').($tag === 'a' ? ' '.($recipe['link'] ?? '') : ''));

    $labelClass = $hideLabel ? 'sr-only' : ($collapse ? 'sr-only sm:not-sr-only' : 'truncate');
@endphp

<{{ $tag }}
    data-slot="brand"
    data-size="{{ $size }}"
    @if ($tag === 'a') href="{{ $href }}" @endif
    {{ $attributes->merge(['class' => $rootClass]) }}
>
    @isset($logo)
        <span data-slot="brand-logo" class="inline-flex shrink-0 items-center" aria-hidden="true">{{ $logo }}</span>
    @else
        <span data-slot="brand-mark" class="{{ $markClass }}" aria-hidden="true">
            @isset($icon)
                {{ $icon }}
            @else
                {{ $glyph }}
            @endisset
        </span>
    @endisset
    <span data-slot="brand-label" class="{{ $labelClass }}">{{ $label }}</span>
</{{ $tag }}>