No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Promotion Button

import { PromotionButton } from '@proton/components';

The promotion button is like a normal button but cooler and with gradients

The button can have a nice gradient icon

() => ( <PromotionButton iconName="brand-proton-mail-filled-plus">With Icon</PromotionButton> )

The button can also only have an icon, no text. Remove the border using shape ghost.

() => ( <PromotionButton iconName="upgrade" icon={true} shape="ghost"> Icon Ghost </PromotionButton> )

Hide text on small devices using responsive true

() => ( <PromotionButton iconName="upgrade" icon={true} responsive> Icon Ghost </PromotionButton> )

The button can be very small

() => ( <PromotionButton iconName="brand-proton-mail-filled-plus" icon={true} upsell> Upsell </PromotionButton> )

And the icon can have no gradient

() => ( <PromotionButton iconName="brand-proton-mail-filled-plus" iconGradient={false}> No icon gradient </PromotionButton> )

And other buttons can be used as PromotionButton

() => <ButtonLike as={PromotionButton}>ButtonLike</ButtonLike>