Photon Styling Examples

This page has examples for the profiler’s implementation of the Photon design spec.

Photon Buttons

All buttons have both enabled and disable states. When a button is disabled, please consider adding a title explaining why it's disabled.

Photon Button

<button type="button" class="photon-button">Photon Button</button>
<button type="button" class="photon-button" disabled title="This function is disabled because...">Disabled Photon Button</button>
<a class="photon-button">Photon Button as a link</a>

Photon Button as a link

Photon Button Default

<button type="button" class="photon-button photon-button-default">Default</button>
<button type="button" class="photon-button photon-button-default" disabled title="This function is disabled because...">Disabled Default</button>
<a class="photon-button photon-button-default">Default</a>

Default

Photon Button Primary

<button type="button" class="photon-button photon-button-primary">Primary</button>
<button type="button" class="photon-button photon-button-primary" disabled title="This function is disabled because...">Disabled Primary</button>
<a class="photon-button photon-button-primary">Primary</a>

Primary

Photon Button Destructive

Use this class for destructive actions only.

<button type="button" class="photon-button photon-button-destructive">Delete</button>
<button type="button" class="photon-button photon-button-destructive" disabled title="This function is disabled because...">Disabled Delete</button>
<a class="photon-button photon-button-destructive">Delete</a>

Delete

Photon Button Micro

<button type="button" class="photon-button photon-button-micro">Photon Micro Button</button>
<button type="button" class="photon-button photon-button-micro" disabled title="This function is disabled because...">Disabled Photon Micro Button</button>
<a class="photon-button photon-button-micro">Micro button as a link</a>

Micro button as a link

Photon Button Ghost

<button type="button" class="photon-button photon-button-ghost photon-button-test-image"></button>
<button type="button" class="photon-button photon-button-ghost photon-button-test-image" disabled title="This function is disabled because..."></button>

Photon inputs

Photon Input

<input type="text" class="photon-input" value="Example text" />

Photon Checkbox

<label class="photon-label photon-label-default">
  <input type="checkbox" class="photon-checkbox photon-checkbox-default" />
  Enable Me
</label>

Enable Me

Photon Checkbox Micro (Unofficial)

<label class="photon-label photon-label-micro">
  <input type="checkbox" class="photon-checkbox-micro" />
  Enable Me
</label>

Enable Me

Photon Radio

<label class="photon-label photon-label-default">
  <input type="radio" name="radio-example" class="photon-radio photon-radio-default" />
  Choice 1
</label>
<label class="photon-label photon-label-default">
  <input type="radio" name="radio-example" class="photon-radio photon-radio-default" />
  Choice 2
</label>
<label class="photon-label photon-label-default">
  <input type="radio" name="radio-example" class="photon-radio photon-radio-default" />
  Choice 3
</label>

Choice 1 Choice 2 Choice 3

Photon Radio Micro (Unofficial)

<label class="photon-label photon-label-micro">
  <input type="radio" name="radio-example" class="photon-radio photon-radio-micro" />
  Choice 1
</label>
<label class="photon-label photon-label-micro">
  <input type="radio" name="radio-example" class="photon-radio photon-radio-micro" />
  Choice 2
</label>
<label class="photon-label photon-label-micro">
  <input type="radio" name="radio-example" class="photon-radio photon-radio-micro" />
  Choice 3
</label>

Choice 1 Choice 2 Choice 3

Photon Message Bars

These components work well both when taking all the available space or when they're smaller (sized in a flex component for example).

Photon Message Bar Generic

<div class="photon-message-bar photon-message-bar-inner-content">
  <div class="photon-message-bar-inner-text">
    This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
  </div>
</div>

This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-inner-content">
  <div class="photon-message-bar-inner-text">
    This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
  </div>
  <button class="photon-button photon-button-micro photon-message-bar-action-button" type="button">
    Call to action
  </button>
</div>

This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar">
  <div class="photon-message-bar-inner-content">
    <div class="photon-message-bar-inner-text">
      This is a dismissable message bar. This add-on is not compatible with your version of Firefox.
    </div>
    <button class="photon-button photon-button-micro photon-message-bar-action-button" type="button">
      Call to action
    </button>
  </div>
  <button class="photon-button photon-message-bar-close-button" type="button"
    aria-label="Hide the message" title="Hide the message">
  </button>
</div>

This is a dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar">
  <div class="photon-message-bar-inner-content">
    <div class='photon-message-bar-inner-text'>
      This is a dismissable message bar. This add-on is not compatible with your version of Firefox.
    </div>
  </div>
  <button class="photon-button photon-message-bar-close-button" type="button"
    aria-label="Hide the message" title="Hide the message">
  </button>
</div>

This is a dismissable message bar. This add-on is not compatible with your version of Firefox.

Photon Message Bar Error

<div class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content">
  <div class="photon-message-bar-inner-text">
    This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
  </div>
</div>

This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-error photon-message-bar-inner-content">
  <div class="photon-message-bar-inner-text">
    This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
  </div>
  <button class="photon-button photon-button-micro photon-message-bar-action-button" type="button">
    Call to action
  </button>
</div>

This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-error">
  <div class="photon-message-bar-inner-content">
    <div class="photon-message-bar-inner-text">
      This is a dismissable message bar. This add-on is not compatible with your version of Firefox.
    </div>
    <button class="photon-button photon-button-micro photon-message-bar-action-button" type="button">
      Call to action
    </button>
  </div>
  <button class="photon-button photon-message-bar-close-button" type="button"
    aria-label="Hide the message" title="Hide the message">
  </button>
</div>

This is a dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-error">
  <div class="photon-message-bar-inner-content">
    <div class='photon-message-bar-inner-text'>
      This is a dismissable message bar. This add-on is not compatible with your version of Firefox.
    </div>
  </div>
  <button class="photon-button photon-message-bar-close-button" type="button"
    aria-label="Hide the message" title="Hide the message">
  </button>
</div>

This is a dismissable message bar. This add-on is not compatible with your version of Firefox.

Photon Message Bar Warning

<div class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content">
  <div class="photon-message-bar-inner-text">
    This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
  </div>
</div>

This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-warning photon-message-bar-inner-content">
  <div class="photon-message-bar-inner-text">
    This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.
  </div>
  <button class="photon-button photon-button-micro photon-message-bar-action-button" type="button">
    Call to action
  </button>
</div>

This is a non-dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-warning">
  <div class="photon-message-bar-inner-content">
    <div class="photon-message-bar-inner-text">
      This is a dismissable message bar. This add-on is not compatible with your version of Firefox.
    </div>
    <button class="photon-button photon-button-micro photon-message-bar-action-button" type="button">
      Call to action
    </button>
  </div>
  <button class="photon-button photon-message-bar-close-button" type="button"
    aria-label="Hide the message" title="Hide the message">
  </button>
</div>

This is a dismissable message bar. This add-on is not compatible with your version of Firefox.

<div class="photon-message-bar photon-message-bar-warning">
  <div class="photon-message-bar-inner-content">
    <div class='photon-message-bar-inner-text'>
      This is a dismissable message bar. This add-on is not compatible with your version of Firefox.
    </div>
  </div>
  <button class="photon-button photon-message-bar-close-button" type="button"
    aria-label="Hide the message" title="Hide the message">
  </button>
</div>

This is a dismissable message bar. This add-on is not compatible with your version of Firefox.

Typography

<div class="photon-display-20">Something just happened.</div>
<h4 class="photon-title-30">Title 30 followed with body 30</h4>
<div class="photon-body-30">This is a large body of text.</div>
<div class="photon-caption-30">This is a caption. Normally its color is also paler.</div>
<h4 class="photon-title-20">Title 20 followed with body 20</h4>
<div class="photon-body-20">This is a large body of text.</div>
<div class="photon-caption-20">This is a caption. Normally its color is also paler.</div>
<h4 class="photon-title-10">Title 10 followed with body 10</h4>
<div class="photon-body-10">This is a large body of text.</div>
<div class="photon-caption-10">This is a caption. Normally its color is also paler.</div>

Something just happened.

Title 30 followed with body 30

This is a large body of text.

This is a caption. Normally its color is also paler.

Title 20 followed with body 20

This is a large body of text.

This is a caption. Normally its color is also paler.

Title 10 followed with body 10

This is a large body of text.

This is a caption. Normally its color is also paler.

Bigger components

Confirm dialog

This is used to display a confirmation dialog. This will be usually used inside another container.

<div className="confirmDialog">
  <h3 className="confirmDialogTitle">
    Wonderful title
  </h3>
  <div className="confirmDialogContent">
    Wonderful content
  </div>
  <div className="confirmDialogButtons">
    <input
      type="button"
      className="photon-button photon-button-default"
      value="Cancel"
      onClick={doSomethingOnCancel}
    />
    <input
      type="button"
      className="photon-button photon-button-destructive"
      value="Confirm"
      onClick={doSomethingOnConfirm}
    />
  </div>
</div>