Button - Icon Last updated: 9/20/21
Button - Icon is a button that contains an icon and no accompanying text.
CSS Styling React Components
Base Use the base class pier-button-icon to create a default icon button
< button class = "pier-button-icon" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Sizes Use the modifier classes pier-button-icon--xs, pier-button-icon--sm, pier-button-icon--md, or pier-button-icon--lg to change the size of the button-icon.
< button class = "pier-button-icon pier-button-icon--xs -m-h-2" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i> < / button
> < button class = "pier-button-icon pier-button-icon--sm -m-h-2" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i> < / button
> < button class = "pier-button-icon pier-button-icon--md -m-h-2" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i> < / button
> < button class = "pier-button-icon pier-button-icon--lg -m-h-2" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Disabled Use the modifier class pier-button-icon--disabled to change the state of the icon button to disabled.
< button class = "pier-button-icon pier-button-icon--disabled" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Pill Use the modifier class pier-button-icon--pill to change the state of the icon button to pill.
< button class = "pier-button-icon pier-button-icon--pill" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Hero Use the modifier class pier-button-icon--hero to change the state of the icon button to hero.
< button class = "pier-button-icon pier-button-icon--hero" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Secondary Use the modifier class pier-button-icon--secondary to change the state of the icon button to secondary.
< button class = "pier-button-icon pier-button-icon--secondary" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Danger Use the modifier class pier-button-icon--danger to change the state of the icon button to danger.
< button class = "pier-button-icon pier-button-icon--danger" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
Dark Use the modifier class pier-button-icon--dark to change the style of the icon button for dark UI themes.
< button class = "pier-button-icon pier-button-icon--dark -m-h-2" >
< i class = "fas fa-pen pier-button-icon__icon" > < / i> < / button
> < button
class = "
pier- button- icon pier- button- icon-- secondary pier- button- icon-- dark
- m- h- 2
"
>
< i class = "fas fa-pen pier-button-icon__icon" > < / i>
< / button>
© 2021 Gumgum, Inc.
