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>
onClick
Use the onClick prop to handle when the GetPro button is clicked.
<GetPro isExpanded onClick={() => alert('Get Pro clicked')} />
Tooltip placement
Use the tooltipPlacement prop to control where the tooltip appears relative to the trigger. It accepts the same values as the Tooltip's placement prop. The default value is bottom.
<Stack className="gap-4 items-start">
<GetPro tooltipPlacement="top" />
<GetPro tooltipPlacement="bottom" />
<GetPro tooltipPlacement="right" />
</Stack>
API Reference
GetPro
| Prop | Default | Description |
|---|---|---|
isExpanded? | false | booleanWhether or not show 'Get Pro' text on default view. If false, 'aria-label' as "Get Pro" will be announced to screen-readers. |
isRounded? | false | booleanWhether or not to show the badge with rounded corners. |
label | "Get Pro" | stringPass a localized version of "Get Pro" to be rendered as text content. |
size? | "standard" | "small" | "standard" | "large"Pass the size prop to adjust the button's appearance. |
tooltipPlacement? | "bottom" | 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'Controls the tooltip's placement relative to the trigger. Accepts the same values as the Tooltip placement prop. |
onClick? | _ | () => voidCallback invoked when the GetPro button is clicked. |
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 |