Button - Hero Last updated: 9/20/21
Buttons - hero is the primary button defined by the primaryBoulevard gradient
CSS Styling React Components
Base Use the base class pier-button-hero and nest inside pier-button-hero__content to create a default hero button
< button class = "pier-button-hero" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
>
< / button>
Sizes Use the modifier classes pier-button-hero--xs, pier-button-hero--sm, pier-button-hero--md, or pier-button-hero--lg to change the size of the button-hero.
< button class = "pier-button-hero pier-button-hero--xs -m-h-2" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
> < / button
> < button class = "pier-button-hero pier-button-hero--sm -m-h-2" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
> < / button
> < button class = "pier-button-hero pier-button-hero--md -m-h-2" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
> < / button
> < button class = "pier-button-hero pier-button-hero--lg -m-h-2" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
>
< / button>
Disabled Use the modifier class pier-button-hero--disabled to change the state of the hero button to disabled.
< button class = "pier-button-hero pier-button-hero--disabled" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
>
< / button>
Pill Use the modifier class pier-button-hero--pill to change the state of the hero button to pill.
< button class = "pier-button-hero pier-button-hero--pill" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
>
< / button>
Dark Use the modifier class pier-button-hero--dark to change the style of the hero button for dark UI themes.
< button class = "pier-button-hero pier-button-hero--dark" >
< span class = "pier-button-hero__content"
> < i class = "pier-button-hero__icon fas fa-check" > < / i> Button Text< / span
>
< / button>
Group Use the modifier classes pier-button-hero--cap-left will cap the left border radius to 0 pier-button-hero--cap-right will cap the right border radius to 0, pier-button-hero--cap will cap both sides to a border radius of 0
Button Text
Button Text
Button Text
< button class = "pier-button-hero pier-button-hero--cap-left" >
< span class = "pier-button-hero__content" > Button Text< / span> < / button
> < button class = "pier-button-hero pier-button-hero--cap" >
< span class = "pier-button-hero__content" > Button Text< / span> < / button
> < button class = "pier-button-hero pier-button-hero--cap-right" >
< span class = "pier-button-hero__content" > Button Text< / span>
< / button>
Block Use the modifier class pier-button-hero--block to change the state of the hero button to block.
< button class = "pier-button-hero pier-button-hero--block" >
< span class = "pier-button-hero__content" > Button Block< / span>
< / button>
© 2021 Gumgum, Inc.
