Logo

A Logo represents your business and company's first introduction to consumers. It consists of the product's symbol and name. By default, Logo displays both but you can show either of them to fit your needs. Logo supports a list of product symbols to choose from or you can use a different one as well.

Usage

Usually Logo appears inside the Appbar and Sidebar components but you can also use it at other places.

import { Logo } from "@asphalt-react/logo"

 <Logo />

Supported product symbols

• Gojek
• GoRide
• GoCar
• GoSend
• GoFresh
• GoFood
• GoTix
• GoPay
• GoPoints
• GoBiz
• GoPlay
• GoPromo
• AsphaltReact
• AsphaltWeb
• Bullpup
• Coffer
• Radar

Product brand name typeface

When you add a brand name to the logo using the product prop, it renders in Maison Neue Extended. If the font doesn't load, ensure you've installed the necessary typeface. Follow these steps to install the Maison Neue typeface.

Props

children

The custom logo to display which is not present in the product symbols list. It overrides product and symbol props.

| type | required | default | | ---- | -------- | ------- | | node | false | N/A |

size

Size of Logo. Accepts "xs", "s", "m" and "l". It doesn't apply to custom logos.

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

product

Brand name of your product. To remove it, set it to false.

| type | required | default | | ----- | -------- | ------- | | union | false | "gojek" |

symbol

Renders symbol of your product. This prop will always default to Gojek logo. To remove it, set it to false.

| type | required | default | | ----- | -------- | ------- | | union | false | null |