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.