pure-button

Simple CSS for buttons.

Default Buttons

To create a Pure Button, use the <pure-button></pure-button> web component. If you add a href to the component, it will automatically become a <a>. Or if you use the as property to manually set the base element (such as an <input>).

A Pure Button A Pure Button A Pure Button

<pure-button href="#">A Pure Button</pure-button>
<pure-button>A Pure Button</pure-button>
<pure-button as="input" type="submit">A Pure Button</pure-button>

Disabled Buttons

To mark a button as disabled, add the disabled property alongside pure-button. Alternatively, add the "disabled" attribute directly to your button.

A Pure Button A Pure Button A Pure Button

<pure-button href="#" disabled>A Pure Button</pure-button>
<pure-button disabled>A Pure Button</pure-button>
<pure-button as="input" type="submit" disabled>A Pure Button</pure-button>

Properties

PropertyAttributeDescriptionTypeDefaultasasHTML element to use as basisstringundefinedcolorcolorBackground colorstringundefineddisableddisabledIs disabled?booleanundefinedhrefhrefDisplays button as linkstringundefinedtargettargetSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".stringundefinedtypetypeThe button or input type (usually submit)"button" \| "reset" \| "submit"undefinedvaluevalueOptional prop for input to show textstringundefined

Built with StencilJS