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>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 |