DuplexButton

Components

DuplexButton()

DuplexButton(props, context?): ReactNode

A DuplexButton component is a special type of button that has been customized to satisfy a specific use case. This button will change its label depending on its active and hover state. A DuplexButton component takes all the props of a Button component minus the label and additional customization props as shown below:

Parameters

Parameter	Type
props	DuplexButtonProps
context?	any

Returns

ReactNode

Example

 <DuplexButton
   name='dropdown'
   customStyle={disabledStyle}
   inactiveLabel={t('Follow')}
   activeLabel={t('Following')}
   activeHoverLabel={t('Unfollow')}
   active={following}
  />

Source

libs/design-system-core/src/components/DuplexButton/index.tsx:51

Props

DuplexButtonProps

DuplexButtonProps: Omit <ButtonProps, "label"> & object

Type declaration

Member	Type
active	boolean
activeHoverIcon	React.ReactElement
activeHoverLabel	string
activeIcon	React.ReactElement
activeLabel	string
activeVariant	ButtonProps["variant"]
allowMinimization	boolean
fixedWidth	string
inactiveLabel	string
inactiveVariant	ButtonProps["variant"]
onClickActive	EventHandler<SyntheticEvent>
onClickInactive	EventHandler<SyntheticEvent>

Source

libs/design-system-core/src/components/DuplexButton/index.tsx:7