GetPro
GetPro is a visual indicator that informs users they are in a "Free" subscription and serves as a prompt to switch to "Paid" plans.
Updated in eds-core@1.13.0
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { GetPro } from '@adaptavant/eds-core';
Sizes
<GetPro> is available in 3 sizes. "Standard" is the default.
<Stack className="gap-2 items-start">
<GetPro size="small" />
<GetPro size="standard" />
<GetPro size="large" />
</Stack>
isExpanded
To display the 'Get Pro' label by default, utilize the isExpanded prop.
<Stack className="gap-2 items-start">
<GetPro size="small" isExpanded />
<GetPro size="standard" isExpanded />
<GetPro size="large" isExpanded />
</Stack>
isRounded
To achieve <GetPro> element styled like button use isRounded prop along with isExpanded.
<Stack className="gap-2 items-start">
<GetPro size="small" isExpanded isRounded />
<GetPro size="standard" isExpanded isRounded />
<GetPro size="large" isExpanded isRounded />
</Stack>
Custom content
To Control innerText of GetPro element, use label prop and assign a string.
<Stack className="gap-2 items-start">
<GetPro size="small" isExpanded label="Obtener pro" />
<GetPro size="standard" isExpanded label="Obtener pro" />
<GetPro size="large" isExpanded label="Obtener pro" />
</Stack>
API Reference
GetPro
| Prop | Type | Description | Default |
|---|---|---|---|
| isExpanded? | boolean | Whether or not show 'Get Pro' text on default view. If false, 'aria-label' as "Get Pro" will be announced to screen-readers. | false |
| isRounded? | boolean | Whether or not to show the badge with rounded corners. | false |
| label | string | Pass a localized version of "Get Pro" to be rendered as text content. | "Get Pro" |
| size? | "small" | "standard" | "large" | Pass the size prop to adjust the button's appearance. | "standard" |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
GetPro parts
| Part | Description |
|---|---|
| iconAfterAnimation | Used to animate the second icon |
| iconBeforeAnimation | Used to animate the first icon |
| iconWrapper | The container around both icons |
| label | The text content |