Buttons

Buttons are created by leveraging Razor Helpers in order to keep the markup consistent, and facilitate concepts like button 'styles' and 'layouts'.

Button styling and helpers are used with the HTML elements <button> and <a>, with options for specifically creating a submit button (<button type="submit" />) as well. Each element type (including <button type="submit" />) has a series of helpers available so that arguments can be passed in a variety of patterns.

The Razor Helpers make use of named and optional arguments. This structure makes it easy for a caller to supply only required parameters; optional parameters can be provided in any order as long as they are named (in fact, all parameters can be in any order if they are named).

Default Buttons

Following are the basic signatures to output buttons which have our default styling applied. These signatures involve only the required arguments to generate the relevant element.

@ButtonHelpers.Button("I'm a button")
@ButtonHelpers.ButtonLink("I'm a link", "myHref")
@ButtonHelpers.ButtonSubmit("And I'm a submit button")

I'm a link

The following illustrate the difference between calling with arguments in the order the helper expects, vs calling with named arguments in any order.

@ButtonHelpers.ButtonLink("I'm a link", "myHref")
@ButtonHelpers.ButtonLink(href: "myHref", text: "I'm a link")

I'm a link I'm a link

Button Styles

The examples below illustrate visual variants on the default button (note that "cta" is short for "call to action"). These styles are achieved with a string passed to our helper methods. There is no support for applying more than one 'style' to a button at a time (ie, "critical commerical" or ["critical","commercial"] will not work).

A secondary_cta button would typically be on its own line, and most often is a link ("a" element).

@ButtonHelpers.Button("Critical button", "critical")
@ButtonHelpers.Button("Commercial button", "commerical")
@ButtonHelpers.Button("Cta button", "cta")
@ButtonHelpers.Button("Cancel button", "cancel")
@ButtonHelpers.ButtonLink("Secondary CTA button is often a link", "myHref", "secondary_cta")

Secondary CTA button is often a link

Disabled Buttons

A boolean value 'true' can be passed to a button helper to create a disabled button. A button will be disabled both visually and functionally with the html attribute "disabled". Note that there is a JavaScript utility available for disabling a button.

The helper signatures permit optional parameters for "id" and "class" before the disabled boolean, so the disabled arguments below are "named" by prefacing with "disabled:". This lets the caller skip the "id" and "class" arguments.

For Internet Explorer previous to version 11, it is not possible to disable a link with CSS alone.

@ButtonHelpers.Button("Disabled", disabled: true)
@ButtonHelpers.Button("Disabled critical", "critical", disabled: true)
@ButtonHelpers.Button("Disabled commercial", "commercial", disabled: true)
@ButtonHelpers.Button("Disabled cta", "cta", disabled: true)
@ButtonHelpers.ButtonLink("Disabled secondary cta", "myHref", "secondary_cta", disabled: true)
$('.btn').sbuxButton('disable');

Disabled secondary cta

Button Layout Modifiers

There are several utility classes available to influence layout of individual buttons. These are available as options in the button helper methods.

  • "Block" makes a button block level by wrapping itself with a block-level element..
  • "Centered" horizontally centers a button within its parent element by wrapping itself with a block-level element set to text-align: center.
  • "Standalone" creates a button with top and bottom margin that helps a button stand out from surrounding content.

Multiple modifiers can be passed at a time as an array as seen in the fourth example. Note that if multiple layouts are needed the layouts array becomes a required parameter and uses a different function signature.

The following examples have gray backgrounds on parent elements to help illustrate what is going on.

@ButtonHelpers.Button("I'm block level", layout: "block")
@ButtonHelpers.Button("I'm centered", "critical", layout: "centered")
@ButtonHelpers.Button("I have extra margin", "commercial", layout: "standalone")
@ButtonHelpers.Button("I have two modifiers", new string[2] {"standalone","centered"}, "commercial")

Full Width Buttons

A button can be made to be full width within its nearest block-level ancestor by passing in the modifier class "btn--full_width".

@ButtonHelpers.Button("Wide load coming through!", @class: "btn--full_width")

At times it will be handy to have a button that is full width at smaller device sizes, and then revert to native width at a larger breakpoint. A utility mofifier can be passed alongside the "btn--full_width" modifier to indicate the breakpoint at which to assume native width.

@ButtonHelpers.Button("I'm wide part-time", @class: "btn--full_width btn--sm_auto_width")

Alternate Helper Signatures

Because most buttons are relatively simple, typically needing text, styling classes, and occasionally an id, the base pattern for implementing a button using a Razor helper is to pass the options as strings, for example:

@ButtonHelpers.Button("My text", "button type", "id")

However, there is no end to the variations a specific project may need, and so a few overload methods are available to provide more efficient ways to pass in options. One overload takes "text" as a required argument, and permits all desired html attributes for the button to be passed as an object. "Type" and "layout" arguments are optional. The 'attributes' object is passed as an 'ExpandoObject'. This signature is illustrated below.

@ButtonHelpers.Button("My text", new{
    id = "some_button_ID",
    class = "some_button_class,
    data-count = "2"                                               
}.ToExpando(),"critical", "centered")