Buttons
There are lots of different kinds of buttons out there in the wide world of UX, but Showrunner’s buttons (so far) typically fall into one of two categories. They’re not scientific, and there’s some overlap, but knowing what type of button you’re using is helpful in informing how it should look and behave.
Calls to Action. These are buttons help guide the user in a flow. They often have a label that restates what the user entered a view to accomplish—like save a version or export with revision asterisks. Most of our CTA buttons today are used in modals (like the Save to Version History modal) and forms (like when a user changes their password from the Settings page).
Tools. These buttons provide, well, tools for users to interact with as they move through the app. These buttons need to be unobtrusive enough to not distract from an overall experience which may not even involve them, but obvious enough so that when a user needs them, they know where to go.
Primary buttons are typically calls to action. The button you’ll see most often is the primary button, which should be used in situations where the action that corresponds to the button is the most important or relevant thing a user can do at the moment.
Primary buttons look like this:
<button class="o-button o-button--primary">Primary</button>A disabled button can be an important context clue to help users orient themselves and understand broader context. For example, a “submit” button might appear disabled if there’s an empty required form field.
To help users understand that the button in its current disabled state is unclickable, the disabled button’s styles shouldn’t change on hover, like you’d expect with a normal, clickable button.
In the future, this modifier will be agnostic enough to apply to any button, but we're not there yet.
<button class="o-button o-button--primary o-button--disabled">Primary Disabled</button>Secondary buttons are a bit of an odd duck, because we don’t technically use any in the app today. Legacy Showrunner used them, though, often as tools that allowed users to manipulate their script (we used a secondary button for "print", for example). One of the reasons they fell into disuse was because they were too big and obtrusive for what we needed them to be.
It's likely we'll need secondary buttons again at some point in the near future. In that case, we should take a cue from the existing "Create Script" dashboard button and style them similiarly, like this:
<button class="o-button o-button--secondary">Secondary</button>This is what we want people to see when they aren't allowed to do something that wasn't very important to begin with.
<button class="o-button o-button--secondary o-button--disabled">Secondary Disabled</button>Sometimes. we need to make a button look like it's a link. This is often because we don't want to distract from the main call to action, or we want to give users a sense that they're going to a destination, rather than performing an action.
This modifier was designed to be used on a white background, so no background color would be visible.
It looks like this:
<button class="o-button o-button--link">This is not a link</button>