@teft/buttons NPM

Buttons

Teft styling for WordPress Buttons Block buttons and custom buttons with the .teft-button class. Override default WordPress colors, sizing and border radius with Teft custom properties.

Installation

Install the module

npm install @teft/buttons

Variables

Name	Default value	Explanation
`--teft-buttons-primary-color`	`var(--teft-theme-primary-color, #1897ec)`	Background color for primary button. Inherit color from theme package.
`--teft-buttons-text-color`	`var(--teft-theme-on-primary-color, #fff)`	Text color for primary button. Inherit color from theme package.
`--teft-buttons-outlined-color`	`var(--teft-buttons-primary-color)`	Text and border color for button with outlined style.
`--teft-buttons-disabled-color`	`var(--teft-theme-disabled-color, #ccc)`	Background color for disabled buttons. Inherit color from theme package.
`--teft-buttons-disabled-text-color`	`var(--teft-theme-on-primary-color, #fff)`	Text color for disabled buttons. Inherit color from theme package.
`--teft-buttons-border-radius`	`6.25em`	Button burder radius.

Examples

Using default WordPress Buttons Block markup.

<div class="wp-block-buttons">
	<div class="wp-block-button"><a class="wp-block-button__link" href="#">Primary Button</a></div>
	<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="#">Outlined Button</a></div>
</div>

Buttons block in different styles and colors.

Markup using `.teft-button` class.

<a href="#" class="teft-button">Primary Teft Button</a>
<input type="button" class="teft-button teft-button--secondary" value="Teft Button Secondary" />
<input type="button" class="teft-button teft-button--alert" value="Teft Button Alert" />
<button type="submit" class="teft-button teft-button--success">Teft Button Success</button>
<button type="button" class="teft-button teft-button--warning">Teft Button Warning</button>
<button type="button" class="teft-button teft-button--warning" disabled>Teft Button Warning :disabled</button>