| Property | Type | Description |
|---|---|---|
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 | See Type Tester OpenType features config below |
variableAxesPosition | 'auto' | 'features-panel' | 'inline' | 'above’ | Controls where variable axes appear. features-panel puts the axes inside the “OT Features” panel. inline puts them inline next to the Size sliders, and above adds the sliders above the regular toolbar and always visible. auto becomes features-panel if there are more than one axis, and inline if there is only one axis. Defaults to auto |
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' } |