larva objects: o-icon-button.search

Available Variants

prototype search
o-icon-button README

The Icon button is comprised of c_icon and c_span. While c_icon and c_span both support URLs, any URL for o-icon-button should be passed using o_icon_button_url. In this case, it will render an anchor tag instead of a button tag.

Available configurations:

  • o-icon-button.search – Contains search icon from c-icon and no text.
o-icon-button Twig The markup file. 
{% if o_icon_button_url %}
	<a href="{{ o_button_url }}" class="{{ o_icon_button_classes }}" target="{{ o_icon_button_target_attr }}" rel="{{ o_icon_button_rel_attr }}" data-pmc-sp-product="{{ o_icon_button_guid_attr }}" data-category-name="{{ o_icon_button_category_attr }}" {{ wp_action( 'pmc_do_render_custom_ga_tracking_attr', o_icon_button_ga_tracking ) }}>
{% else %}
	{% if o_icon_use_span %}
		<span class="o-icon-button {{ o_icon_button_classes }}">
	{% else %}
		<button class="o-icon-button {{ o_icon_button_classes }}">
	{% endif %}
{% endif %}

	{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}

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

	{% if c_span %}
		{% include "@larva/components/c-span/c-span.twig" with c_span %}
	{% endif %}

{% if o_icon_button_url %}
	</a>
{% else %}
	{% if o_icon_use_span %}
		</span>
	{% else %}
		</button>
	{% endif %}
{% endif %}
o-icon-button.search JSON The data object for this pattern. 
{
	"o_icon_button_classes": "lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-cursor-pointer lrv-u-flex",
	"o_icon_button_ga_tracking": {},
	"o_icon_button_rel_attr": "",
	"o_icon_button_screen_reader_text": "Click to Expand Search Input",
	"o_icon_button_target_attr": "",
	"c_icon": {
		"c_icon_link_classes": "",
		"c_icon_name": "search",
		"c_icon_target_attr": "_blank",
		"c_icon_link_screen_reader_text": "Icon Link",
		"c_icon_url": false,
		"c_icon_classes": "lrv-u-display-block lrv-u-width-16 lrv-u-height-16",
		"c_icon_rel_name": "noopener noreferrer",
		"c_icon_screen_reader_tag_text": "",
		"c_icon_screen_reader_text": "Plus Icon",
		"c_icon_screen_reader_title_attr": "Plus Icon"
	},
	"c_span": false
}