mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 09:22:43 +03:00
a5a76b565b
[DOCS-518]: https://hasurahq.atlassian.net/browse/DOCS-518?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8724 GitOrigin-RevId: 88935fde9cf6235a7e4bfbe9fb4bb6020de64cca
43 lines
1.2 KiB
Plaintext
43 lines
1.2 KiB
Plaintext
---
|
|
title: Product Badges
|
|
description: How to add badges to your product pages
|
|
keywords:
|
|
- hasura
|
|
- style
|
|
- product badges
|
|
slug: product-badges
|
|
---
|
|
|
|
import ProductBadge from '@site/src/components/ProductBadge';
|
|
|
|
# Product Badges
|
|
|
|
For any feature that isn't available across all products, you can add a badge to the product page to highlight the
|
|
feature. The badge looks like this:
|
|
|
|
<ProductBadge ce free />
|
|
|
|
The badge accepts a series of props - as boolean - that correspond to the products that the feature is available on. The
|
|
order of the props doesn't matter, but the props themselves are:
|
|
|
|
| Prop | Product |
|
|
| ---------- | ------------------------ |
|
|
| `ce` | Community Edition |
|
|
| `free` | Cloud Free |
|
|
| `standard` | Cloud Standard |
|
|
| `pro` | Cloud Professional |
|
|
| `ee` | Cloud Enterprise Edition |
|
|
| `self` | Self-Hosted EE |
|
|
|
|
To create the example referenced above, you would start by importing the component near the markdown file's frontmatter:
|
|
|
|
```jsx
|
|
import ProductBadge from '@site/src/components/ProductBadge';
|
|
```
|
|
|
|
Then, add the component to the file immediately after the page's title (`<h1 />`):
|
|
|
|
```jsx
|
|
<ProductBadge ce free />
|
|
```
|