GoComponents

# Button

This page contains all possible variations of the VUE button component.

Use buttons to draw attention to important actions.

# Event handling

You can bind native events to the button component using the .native modifier, this is applied to the v-on directive.

A simple implementation would look like the following:

<GocoButton v-on:click.native="onClick">Button</GocoButton>

NOTE

We recommend using the v-on shorthand approach @click.native="onClick" when binding events to the button component in your application.

# Primary

<GocoButton>Button</GocoButton>

# Monochrome

<GocoButton monochrome>Button</GocoButton>

# Ghost black

<GocoButton ghostBlack>Button</GocoButton>

# Ghost white

<GocoButton ghostWhite>Button</GocoButton>

If navigation is required for the button, use the link prop.

<GocoButton link="https://www.gocompare.com" target="_blank">Button</GocoButton>

TIP

All other props provided in this documentation are also applicable to the Link Button.

# Sizes

# Small

<GocoButton size="small">Button</GocoButton>

# Large

<GocoButton size="large">Button</GocoButton>

# Full Width

<GocoButton full-width>Button</GocoButton>

# Full Width (Mobile Only)

Creates a full width button for mobile screen sizes

<GocoButton full-width-mobile>Button</GocoButton>

# Disabled

<GocoButton disabled>Button</GocoButton>

# With icon

Each button can be supported with an SVG icon of your preference.

WARNING

Icon may not display correctly on small size of the Button.

# Right icon

<GocoButton icon="chevron-right" icon-position="right">Button</GocoButton>

# Left icon

<GocoButton icon="plus" icon-position="left">Button</GocoButton>

# With loader

Each button has a loading state available. This can be applied to all button types.

<GocoButton loading>Button</GocoButton>

TIP

The correct variant of the spinner will automatically apply to the to all button types.

# Component props

Prop Type Default Description
monochrome Boolean false Changes the variation of the button to monochrome. Defaults to primary button if not set.
ghostBlack Boolean false Changes the variation of the button to ghostBlack. Defaults to primary button if not set.
ghostWhite Boolean false Changes the variation of the button to ghostWhite. Defaults to primary button if not set.
size String Change the size of the button. Available options are small and large
fullWidth Boolean false Expand the button to 100% width of its container.
fullWidthMobile Boolean false Expand the button to 100% width of its container only on small viewports.
wide Boolean false Adds extra padding to the button.
icon String Adds an icon the the button.
iconPosition String Set icon alignment. Available options are left and right
loading Boolean false Can be set when the button is in loading state.
disabled Boolean false Set button as disabled. This prevents users from interacting with the button.
link String Creates a hyperlink rendered in the href attribute. This allows users to navigate to a destination page or section of a page.
target String Opens the link in a specified way. Examples are _self and _blank

← Input →