pencil.js / button / ButtonOptions

Interface: ButtonOptions

Defined in: button.ts:11

Button options

Extends

• InputOptions
• Pick<TextOptions, | "font" | "fontSize" | "align" | "bold" | "italic" | "underscore" | "lineHeight" | "rounded">

Properties

Property	Type	Description	Overrides	Inherited from	Defined in
active	Style	Color of the background when pressed	-	-	button.ts:15
align	CanvasTextAlign	Text horizontal alignment	-	TextOptions.align	text.ts:18
bold	boolean	Use bold font-weight	-	TextOptions.bold	text.ts:20
cap?	CanvasLineCap	How lines end	-	InputOptions.cap	component.ts:85
clip	| Component<ComponentOptions> | null	Other component used to clip the rendering	-	InputOptions.clip	container.ts:26
cursor	string | null	Cursor to use when hover	-	InputOptions.cursor	component.ts:81
dashed	boolean | number[]	Should the line be dashed, you can also specify the dash pattern (ex: [4, 4] or Component.dashes.dots)	-	InputOptions.dashed	component.ts:79
fill	Style	Color used to fill, set to null for transparent	-	InputOptions.fill	component.ts:73
font	string	Font to use (can be a URL)	-	TextOptions.font	text.ts:14
fontSize	number	Size of the text in pixels	-	TextOptions.fontSize	text.ts:16
foreground	Style	Color of the foreground elements	-	InputOptions.foreground	widget.ts:13
hover	Style	Color of the background when hovered	-	InputOptions.hover	input.ts:13
italic	boolean	Use italic font-style	-	TextOptions.italic	text.ts:22
join	CanvasLineJoin	How lines join between them	-	InputOptions.join	component.ts:83
lineHeight	number	Ratio of line height (1 is normal, 2 is twice the space)	-	TextOptions.lineHeight	text.ts:26
opacity	number | null	Opacity level from 0 to 1 (multiplied with its parents opacity, null means 1)	-	InputOptions.opacity	container.ts:16
origin	| string | PositionDefinition	Relative offset (Rectangle based shapes also accept named origins like "center")	-	InputOptions.origin	component.ts:87
rotation	number	Rotation ratio from 0 to 1 (clockwise)	-	InputOptions.rotation	container.ts:18
rotationCenter	PositionDefinition	Center of rotation relative to this position	-	InputOptions.rotationCenter	container.ts:20
rounded	number | DOMPointInit | (number | DOMPointInit)[]	Radius of the corners (or a list of radii, see https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect)	-	RectangleOptions.rounded	rectangle.ts:10
scale	| number | PositionDefinition	Scaling ratio or a pair of value for horizontal and vertical scaling	-	InputOptions.scale	container.ts:22
shadow	Partial<ShadowOptions>	Set of options to set a shadow	-	InputOptions.shadow	component.ts:89
shown	boolean	Is shown	-	InputOptions.shown	container.ts:14
stroke	Style	Color used to stroke, set to null for transparent	-	InputOptions.stroke	component.ts:75
strokeWidth	number	Stroke line thickness in pixels	-	InputOptions.strokeWidth	component.ts:77
underscore	boolean	Draw a line under the text	-	TextOptions.underscore	text.ts:24
value	string | string[]	Text of the button	InputOptions.value	-	button.ts:13
zIndex	number	Depth ordering	-	InputOptions.zIndex	container.ts:24