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>

Teft buttons in different states.