Logo

display

The LaunchApp brand logo with support for horizontal, stacked, mark-only, and wordmark variants in multiple sizes and color schemes.

Preview

Installation

npm install @launchapp/design-system
Import
import { Logo } from "@launchapp/design-system";

Examples

Default (horizontal, brand)

<Logo />

All variants

<div className="flex flex-col gap-4">  <Logo variant="horizontal" size="md" />  <Logo variant="stacked" size="md" />  <Logo variant="mark" size="md" />  <Logo variant="wordmark" size="md" /></div>

All sizes

<div className="flex flex-col gap-4">  <Logo size="xs" />  <Logo size="sm" />  <Logo size="md" />  <Logo size="lg" />  <Logo size="xl" /></div>

Color schemes

<div className="flex flex-col gap-4">  <Logo color="brand" />  <div className="p-2 bg-slate-900 rounded-md inline-flex">    <Logo color="white" />  </div>  <Logo color="black" /></div>

Props

PropTypeDefaultDescription
variant
"horizontal" | "stacked" | "mark" | "wordmark""horizontal"Visual layout of the logo.
size
"xs" | "sm" | "md" | "lg" | "xl""md"Size preset for the logo.
color
"brand" | "white" | "black" | "current""brand"Color scheme — brand uses bronze + blue, white/black for monochrome, current inherits CSS color.
label
string"LaunchApp"Accessible label for screen readers.
className
string—Additional CSS classes.
← PreviousLabel
Next →Menubar