larva components: `c-button.black`

Available Variants

black brand-basic ghost prototype stripped

c-button README

The button component should be used for anything that looks like a button - this includes acutual button elements and anchor tags. c-button in larva includes certain design configurations to provide a starting point.

If the button is actually an anchor tag, styled as a button, simply configure the button with c_button_url and it will use an anchor. If c_button_url is not set, it will use a button element. Any JS should be attached using a js-* class. This is intended to encourage the use of the button element for on-page interactions, and the use of an anchor tag for buttons that are actually links.

c-button Twig The markup file.

{% if c_button_url %}
	<a class="c-button larva {{ modifier_class }} {{ c_button_classes }}" href="{{ c_button_url }}" target="{{ c_button_target_attr }}" rel="{{ c_button_rel_attr }}" {{ wp_action( 'pmc_do_render_custom_ga_tracking_attr', c_button_ga_tracking ) }}>
{% else %}
	<button class="c-button larva {{ modifier_class }} {{ c_button_classes }}" type="{{ c_button_type_attr }}">
{% endif %}

	<span class="c-button__inner {{ c_button_inner_classes }}">
		{{ c_button_text }}
	</span>

	{% if c_button_screen_reader_text %}
		<span class="lrv-a-screen-reader-only">{{ c_button_screen_reader_text }}</span>
	{% endif %}

{% if c_button_url %}
	</a>
{% else %}
	</button>
{% endif %}

c-button.black JSON The data object for this pattern.

{
	"c_button_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer lrv-u-background-color-black lrv-u-color-white lrv-u-border-radius-5 lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-2",
	"c_button_ga_tracking": {},
	"c_button_inner_classes": "",
	"c_button_rel_attr": "",
	"c_button_screen_reader_text": "Sign Up",
	"c_button_target_attr": "",
	"c_button_text": "Sign Up",
	"c_button_type_attr": "submit",
	"c_button_url": ""
}