Sha256: 888243f5cabd3b7a99b955cd87f45b13d68085bc979f819889742b960dad4fd7
Contents?: true
Size: 1.64 KB
Versions: 10
Compression:
Stored size: 1.64 KB
Contents
--- layout: post title: "Buttons" subtitle: "We have three main buttons styles: primary, secondary, and tertiary. Ideally, the primary button should only ever be used once on a page as the main call to action." categories: components permalink: /components/buttons/ --- <div class="pattern"> <a class="btn btn--primary">Get Started</a> <a class="btn btn--primary ghosted">Get Started</a> </div> ``` html <a class="btn btn--primary">Get Started</a> <a class="btn btn--primary ghosted">Get Started</a> ``` <div class="pattern pattern--dark"> <a class="btn btn--secondary">Update</a> <a class="btn btn--secondary ghosted">Update</a> </div> ``` html <a class="btn btn--secondary">Update</a> <a class="btn btn--secondary ghosted">Update</a> ``` <div class="pattern pattern--dark"> <a class="btn btn--tertiary">View Libraries</a> </div> ``` html <a class="btn btn--tertiary">View Libraries</a> ``` ## Small There is also a smaller button style. This is mainly used for UI elements, and in tables. <div class="pattern pattern"> <a class="btn btn--primary btn--small">Copy Snippet</a> <a class="btn btn--neutral btn--small">Test</a> </div> ``` html <a class="btn btn--primary btn--small">Copy Snippet</a> <a class="btn btn--neutral btn--small">Test</a> ``` ## Social Buttons These are used for linking social accounts when signing in/registering with Pusher <div class="pattern"> <button class="btn btn--google">Connect Google Account</button> <button class="btn btn--github">Connect GitHub Account</button> </div> ``` html <button class="btn btn--google">Connect Google Account</button> <button class="btn btn--github">Connect GitHub Account</button> ```
Version data entries
10 entries across 10 versions & 2 rubygems