Skip to content
design
Components

Logo

The bosun anchor mark with the product name and its tagline, in three sizes.

On this page
SV Althea, Hanse 460, starting up. Instruments, charts and the anchor watch come online in about a minute.
Night
Dusk
Day
Bright
Passage report: Falmouth to A Coruña, 412 NM in 61 h
The logo at every size, with and without its tagline, in the places and themes the app shows it.
Code
import { Card } from "@bosunkit/components/card";
import { Logo } from "@bosunkit/components/logo";
import { BosunkitProvider, PresentationScope } from "@bosunkit/provider";
import type { Theme } from "@bosunkit/tokens/theme";
import { Wifi } from "lucide-react";
import type { CSSProperties, ReactElement } from "react";

export const description: string =
  "The logo where the app shows it: large on the start screen, small without its tagline in the header bar, " +
  "medium on the sidebar in each of the four themes, and large without the tagline on a passage report. The " +
  "provider is given the release, so every logo that shows its tagline shows the release beside the name.";

const THEMES: readonly { readonly theme: Theme; readonly name: string }[] = [
  { theme: "night", name: "Night" },
  { theme: "dusk", name: "Dusk" },
  { theme: "day", name: "Day" },
  { theme: "bright", name: "Bright" },
];

/** A theme tile's top row: the header bar's small logo and the shore link. */
const BAR: CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "var(--space-sm)",
  color: "var(--text-dim)",
};

export default function Showcase(): ReactElement {
  return (
    <BosunkitProvider release="27.1.3">
      <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "var(--space-md)" }}>
        <Card surface="raised">
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: "var(--space-sm)",
              padding: "var(--space-sm) 0",
            }}
          >
            <Logo size="lg" />
            <span style={{ fontSize: 12, color: "var(--text-dim)", textAlign: "center" }}>
              SV Althea, Hanse 460, starting up. Instruments, charts and the anchor watch come online in about a minute.
            </span>
          </div>
        </Card>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 }}>
          {THEMES.map((entry: { readonly theme: Theme; readonly name: string }): ReactElement => (
            <PresentationScope key={entry.theme} theme={entry.theme}>
              <Card footer={entry.name}>
                <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-md)" }}>
                  <div style={BAR}>
                    <Logo size="sm" showTagline={false} />
                    <Wifi size={12} aria-label="Shore link up" />
                  </div>
                  <Logo size="md" />
                </div>
              </Card>
            </PresentationScope>
          ))}
        </div>

        <Card footer="Passage report: Falmouth to A Coruña, 412 NM in 61 h">
          <Logo size="lg" showTagline={false} />
        </Card>
      </div>
    </BosunkitProvider>
  );
}

The logo is the anchor mark beside the product name, with a tagline under the name. It draws in the accent color, and the name and tagline come from the translation catalog, so they follow the crew's language. The mark is hidden from assistive technology, which reads the name. The marks and their clear space are in Logos.

The mark, name, tagline and version keep the default arrow cursor. The logo has no action; see Cursors for the shared interaction rules.

While the tagline shows, the logo shows the release the application runs as v26.10.2, small and at the right end of the name's row, level with the end of the tagline. The release comes from BosunkitProvider's release: the web UI gives it the release bosund reports, and the examples on this site give it 26.10.2. A version prop takes its place. With no provider release and no version, the logo shows no version, and it never shows one it was not given.

Examples

Small

The small logo, for a dense header, with the release the provider is given beside the name.
Code
import { Logo } from "@bosunkit/components/logo";
import { BosunkitProvider } from "@bosunkit/provider";
import type { ReactElement } from "react";

export const description: string =
  "The small logo, for a dense header, with the release the provider is given beside the name.";

export default function Small(): ReactElement {
  return (
    <BosunkitProvider release="27.1.3">
      <Logo size="sm" />
    </BosunkitProvider>
  );
}

Medium

The medium logo, which is the default size, with the release the provider is given beside the name.
Code
import { Logo } from "@bosunkit/components/logo";
import { BosunkitProvider } from "@bosunkit/provider";
import type { ReactElement } from "react";

export const description: string =
  "The medium logo, which is the default size, with the release the provider is given beside the name.";

export default function Medium(): ReactElement {
  return (
    <BosunkitProvider release="27.1.3">
      <Logo />
    </BosunkitProvider>
  );
}

Without the version

showVersion={false} leaves out the version, from the provider or from version, where the release would distract from the screen's own content.

The medium logo with its tagline and no version, although the provider has one.
Code
import { Logo } from "@bosunkit/components/logo";
import { BosunkitProvider } from "@bosunkit/provider";
import type { ReactElement } from "react";

export const description: string = "The medium logo with its tagline and no version, although the provider has one.";

export default function WithoutVersion(): ReactElement {
  return (
    <BosunkitProvider release="27.1.3">
      <Logo showVersion={false} />
    </BosunkitProvider>
  );
}

Large without tagline

showTagline={false} leaves out the tagline, which suits a place where the name has room and the tagline would repeat what the screen says. The provider's release goes with it; a version passed as a prop shows with or without the tagline.

The large logo with the tagline left out, so the name stands alone and the provider's release is left out too.
Code
import { Logo } from "@bosunkit/components/logo";
import { BosunkitProvider } from "@bosunkit/provider";
import type { ReactElement } from "react";

export const description: string =
  "The large logo with the tagline left out, so the name stands alone and the provider's release is left out too.";

export default function LargeWithoutTagline(): ReactElement {
  return (
    <BosunkitProvider release="27.1.3">
      <Logo size="lg" showTagline={false} />
    </BosunkitProvider>
  );
}

Props

PropTypeDefaultDescription
classNamestring | undefined–Classes added to the logo's own.
sizeLogoSize | undefined"md"The logo's size; md by default.
showTaglineboolean | undefinedtrueWhether the tagline shows under the name, with the provider's release; on by default. Off, a version prop still shows.
versionstring | undefined–The release shown small beside the name as v<version>. Unset, the logo shows the provider's release while the tagline shows; with neither, it shows no version.
showVersionboolean | undefinedtrueWhether the version shows, passed as a prop or read from the provider; on by default.
  • Logos: the marks and their clear space.
  • Cursors: when the arrow, pointing hand and text cursor apply.
  • Color: the accent the logo draws in.