PlAppLogo

A product's mark, and its name beside it. The whole component is the framing, and bare is the default, because artwork that was drawn with its own background must not be put on a plate.

React

import { PlAppLogo } from 'plass-ui';

<PlAppLogo shape="plate" name="Acme" render={<a href="/" />}>
  <AcmeGlyph />
</PlAppLogo>;

import 'package:plass_ui/plass_ui.dart';

PlAppLogo(
  shape: PlAppLogoShape.plate,
  name: const Text('Acme'),
  onPressed: goHome,
  child: const AcmeGlyph(),
);

Props

Prop	Type	Default	Description
children	ReactNode	—	The mark — whatever the product's artwork actually is
src	string	—	A picture to draw as the mark, instead of children
alt	string	''	What the picture says. Leave it empty when name is set: the wordmark already says it
name · description	ReactNode	—	The product's name beside the mark, and a line under it — an environment, a tenant, a plan
shape	'bare' | 'plate' | 'circle'	'bare'	How the artwork is framed. bare is the default because most marks already have a frame of their own
variantshared	'solid' | 'glass' | 'ghost'	'solid'	What the plate is made of. Only read when shape is not bare
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The height of the mark, and the type scale of the name beside it
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	The family the plate takes
render	RenderProp	—	Renders something other than a <span>. A logo is nearly always the way home (<a href="/" />)

Prop	Type	Default	Description
child *	Widget	—	The mark — whatever the product's artwork actually is
semanticLabel	String?	''	What the mark says. Leave it out when name is set: the wordmark already says it
name · description	Widget?	—	The product's name beside the mark, and a line under it — an environment, a tenant, a plan
shape	PlAppLogoShape	PlAppLogoShape.bare	How the artwork is framed. bare is the default because most marks already have a frame of their own
variantshared	PlassVariant	PlassVariant.solid	What the plate is made of. Only read when shape is not bare
onPressed	VoidCallback?	—	Makes the logo the way back to the front screen. Null draws the same logo and presses nothing
sizeshared	PlassSize	PlassSize.md	The height of the mark, and the type scale of the name beside it
colorshared	PlassColor	PlassColor.primary	The family the plate takes

What the shared axes mean across the library is in prop conventions.

shape is the component

Three answers to one question, how is this artwork framed, and the default is the one project after project gets wrong.

bare	Drawn as it was given, at the height size asks for and whatever width that comes to. The default.
plate	A tile with the artwork inset in it, corners cut to the house radius.
circle	The same tile, round.

bare is the default because most marks already have a frame. A mark drawn with its own background, its own margin, or the product's name set into it is finished artwork: putting it on a plate gives it two edges, and cropping it to a circle cuts the name in half. Reach for plate or circle only for a mark drawn as a bare glyph, which cannot sit next to anything else until it has been given an edge.

React

import { PlAppLogo } from 'plass-ui';

/**
 * Artwork with its own background and its own margin — the case `bare` exists
 * for, and the case a plate or a circle would ruin.
 */
function Wordmark() {
  return (
    <svg viewBox="0 0 108 32" aria-hidden="true">
      <rect width="108" height="32" rx="6" fill="var(--plass-info-soft)" />
      <text
        x="54"
        y="21"
        textAnchor="middle"
        fill="var(--plass-fg)"
        fontSize="13"
        letterSpacing="2"
      >
        ACME CO
      </text>
    </svg>
  );
}

export default function AppLogoShapes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <PlAppLogo>
        <Wordmark />
      </PlAppLogo>

      <PlAppLogo shape="plate">
        <Wordmark />
      </PlAppLogo>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

/// Artwork with its own background and its own margin — the case `bare` exists
/// for, and the case a plate or a circle would ruin.
class _Wordmark extends StatelessWidget {
  const _Wordmark();

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Container(
      width: 108,
      height: 32,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: tokens.family(PlassColor.info).soft,
        borderRadius: BorderRadius.circular(6),
      ),
      child: Text('ACME CO', style: TextStyle(color: tokens.fg, fontSize: 13, letterSpacing: 2)),
    );
  }
}

class AppLogoShapes extends StatelessWidget {
  const AppLogoShapes({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 360,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        spacing: 20,
        children: <Widget>[
          PlAppLogo(semanticLabel: 'Acme Co', child: _Wordmark()),
          PlAppLogo(shape: PlAppLogoShape.plate, semanticLabel: 'Acme Co', child: _Wordmark()),
        ],
      ),
    );
  }
}

bare sets the height and lets the width follow, which is what a wordmark needs and what a square would destroy. A plate insets the artwork to about seventy percent of the tile rather than filling it, so a glyph has the margin every app icon has.

PlAppLogo or PlAvatar

They look alike and they answer different questions.

PlAvatar is a picture of a person or a thing: always a circle or a fillet, with initials behind it when the picture does not arrive, because there is always something to draw. PlAppLogo is artwork the product owns: it has no fallback worth inventing, and its shape is a decision somebody already made, which is why the shape is a prop here and a house rule there.

Examples

A header's brand slot

The ordinary place for one, and the reason render is worth using: a logo is nearly always the way back to the front page.

<PlHeader
  brand={
    <PlAppLogo shape="plate" name="Acme" render={<a href="/" />}>
      <AcmeGlyph />
    </PlAppLogo>
  }
/>

Saying which copy this is

description is the line under the name, an environment, a tenant, a plan. It is the cheapest way to stop somebody editing production because it looked like staging.

<PlAppLogo shape="plate" name="Acme" description="Staging" color="warning">
  <AcmeGlyph />
</PlAppLogo>

A picture rather than a glyph

src draws an <img> for you, sized the way the shape asks.

<PlAppLogo src="/logo.svg" alt="Acme" />

The mark is a widget, so it is whatever draws the artwork, a PlImage, an Image.asset, a CustomPaint.

PlAppLogo(semanticLabel: 'Acme', child: Image.asset('assets/logo.png'));

Notes

• variant and color are read only when there is a plate. A bare mark is the product's own artwork and the library does not tint it.
• The mark's height is the size ladder: md is 32px, which sits inside a md header's 64px floor with room either side rather than filling it.
• The name is a <span> and not a heading. A logo names the product, and the page's heading names the page.

Accessibility

• With a name, the mark is decorative and is taken off the accessibility tree. The wordmark beside it already says what the product is called, and a picture that says it again is a screen reader reading the name twice.
• Without a name, the mark speaks: alt in React, semanticLabel in Flutter. An empty alt is a real answer and the default. It says the picture carries nothing the text does not.
• A logo that goes home should say so. render={<a href="/" />} makes it a real link with a real destination, rather than a click handler on a picture.