buttonVariants
@shopify/shop-minis-platform-sdk / theme/gravity/buttons/buttonVariants
ButtonVariants
constButtonVariants:object
Type declaration
blurred
blurred:
object
blurred.backgroundColor
backgroundColor:
string='blurred-button-background-a30'
blurred.color
color:
string='foregrounds-contrasting'
borderless
borderless:
object
borderless.backgroundColor
backgroundColor:
string='transparent'
borderless.color
color:
string='foregrounds-primary'
borderlessUnbranded
borderlessUnbranded:
object
borderlessUnbranded.backgroundColor
backgroundColor:
string='transparent'
borderlessUnbranded.color
color:
string='unbranded-button-background'
buttonSmall
buttonSmall:
object
buttonSmall.iconSize
iconSize:
number=14
buttonSmall.lineHeight
lineHeight:
number=16
buttonSmall.paddingVertical
paddingVertical:
number=12
buttonSmall.textVariant
textVariant:
"buttonSmall"
cashBlack
cashBlack:
object
cashBlack.backgroundColor
backgroundColor:
string='shop-cash-dark-button-background'
cashBlack.color
color:
string='multiplier-badge-foreground'
cashOutlined
cashOutlined:
object
cashOutlined.backgroundColor
backgroundColor:
string='transparent'
cashOutlined.borderColor
borderColor:
string='multiplier-badge-foreground'
cashOutlined.borderWidth
borderWidth:
number=1
cashOutlined.color
color:
string='multiplier-badge-foreground'
cashPrimary
cashPrimary:
object
cashPrimary.backgroundColor
backgroundColor:
"multiplier-badge-background"
cashPrimary.color
color:
"multiplier-badge-foreground"
cashSecondary
cashSecondary:
object
cashSecondary.backgroundColor
backgroundColor:
"multiplier-badge-foreground"
cashSecondary.color
color:
"multiplier-badge-background"
cashTertiary
cashTertiary:
object
cashTertiary.backgroundColor
backgroundColor:
string='multiplier-badge-foreground'
cashTertiary.color
color:
string='shop-cash-dark-button-background'
dangerous
dangerous:
object
dangerous.backgroundColor
backgroundColor:
string='highlights-dangerous'
dangerous.color
color:
string='foregrounds-contrasting'
outlined
outlined:
object
outlined.backgroundColor
backgroundColor:
string='backgrounds-regular'
outlined.borderColor
borderColor:
string='outlined-button-border'
outlined.borderWidth
borderWidth:
number=1
outlined.color
color:
string='foregrounds-regular'
outlined-dangerous
outlined-dangerous:
object
outlined-dangerous.backgroundColor
backgroundColor:
string='transparent'
outlined-dangerous.borderColor
borderColor:
string='highlights-dangerous'
outlined-dangerous.borderWidth
borderWidth:
number=1
outlined-dangerous.color
color:
string='highlights-dangerous'
overlay
overlay:
object
overlay.backgroundColor
backgroundColor:
string='blurred-button-background-a30'
overlay.color
color:
string='foregrounds-contrasting'
primary
primary:
object
primary.backgroundColor
backgroundColor:
string='primary-button-background'
primary.color
color:
string='foregrounds-contrasting'
primary-subdued
primary-subdued:
object
primary-subdued.backgroundColor
backgroundColor:
string='subdued-button-background'
primary-subdued.color
color:
string='subdued-button-foreground'
primary-unbranded
primary-unbranded:
object
primary-unbranded.backgroundColor
backgroundColor:
string='unbranded-button-background'
primary-unbranded.color
color:
string='unbranded-button-foreground'
secondary
secondary:
object
secondary.backgroundColor
backgroundColor:
string='unbranded-button-background'
secondary.color
color:
string='unbranded-button-foreground'
tertiary
tertiary:
object
tertiary.backgroundColor
backgroundColor:
string='tertiary-button-background'
tertiary.color
color:
string='tertiary-button-foreground'
text
text:
object
text.backgroundColor
backgroundColor:
string='transparent'
text.color
color:
string='foregrounds-regular'