Type tester config

PropertyTypeDescription
selectable
boolean
Makes the font family and style selectable with a dropdown
textInput
boolean
Enables the input to control the font size value in pixels
groupEdit
boolean
Whether to enable or disable the group edit toggle (Affect all styles)
initialMode
'local' | 'global'
The mode refers to the toggle in the UI: Affect all styles. local mode has this toggle turned off by default, global turns it on
shy
'hover' | 'focus' | true | false
Controls are hidden until the user hovers or focuses the type tester component. 'focus' means the controls are hidden until the user focuses (clicks the text to edit it). true is equivalent to 'hover'. Defaults to false
buyButton
boolean
(Renamed to selectButton)
selectButton
boolean
Enables the Select button. Clicking this button opens the StoreModal with the relevant font style selected
selectButtonLabel
string
The select button label (defaults to 'Select')
selectButtonStyle
'inline' | 'outlined'
Choose from the button styles
toolsPosition
'inline' | 'floating'
Controls display of the toolbar. 'inline' means the each type tester has its own toolbar. 'floating' is a single toolbar fixed to the bottom of the viewport that controls the currently focused tester. Note that shy must be set to 'focus' for the floating style. Defaults to 'inline'
truncate
boolean
Set to true to truncate longer text to a single line. When users click to edit the text, that tester will display all of the content. Defaults to false. Note you may need to increase the “Line height” value to prevent text being chopped off
bulletStyle
'square' | 'round'
Choose bullet styles, e.g. in the OpenType features panel. Defaults to square
autofitOnChange
boolean
For type testers with autofit set to true, this controls behavior when the user edits text. If set to true, the type tester will continue autofitting the new content
openTypeFeatures
object
alignmentButtons
boolean
Set to true to enable text alignment buttons
initialAlignment
'left' | 'center' | 'right'
Defaults to left
min
number (deprecated, see size)
Min font size
max
number (deprecated, see size)
Max font size
size
object
Controls for the Size slider. See Slider config below. Defaults to { min: 10, max: 200, label: 'Size' }
lineHeight
object
Controls for the Line height slider. See Slider config below. Defaults to undefined. Set this value to {} for the default values: { min: 0.7, max: 2, label: 'Line height' }