Docs
Everything You Need to Know
Layouts
Buttons
Buttons, every operating system has them. They look quite different depending on the platform. On iOS they are very subtle. On Android they can be large, colorful and animated. Making the same buttons look and behave as expected when switching platforms can be challenging. We like a challenge. So we present you: ChocolateChip-UI buttons.
Android Buttons
We'll start with Android because they have the most visually complicated buttons.
Navbars & Toolbars
By default all buttons in navbars and toolbars are of the plain type. That means they have no border or background color. Also, when you hover or tap them, they don't exhibit the background shadow effect. Instead they show a solid hover color along with the Material Design ripple effect. Even if you put a specific class on a button in a navbar or toolbar, it will be ignored.
Plain Button
Putting a button without any identifying class creates a plain button. In navbars and toolbars these have no border and no background color. They are completely transparent. They are text-only buttons. When the user hovers or taps, a background color is display along with the Material Design ripple effect.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button>Plain Button</button>
</li>
</ul>
</section>
Raised Button
You can make a button stand out more by putting the class raised on it. This gives the button a background shadow that raises it off the page. The button also gets the default Android button background, a soft gray.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class='raised'>Plain Button</button>
</li>
</ul>
</section>
Raised Button with Background Color
You can give your raised buttons some color to make them stand out. ChocolateChip-UI offers three default colors for you to use. Just add one of the following classes: red, green or blue
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="raised red">Click</button>
<button class="raised green">Click</button>
<button class="raised blue">Click</button>
</li>
</ul>
</section>
Action Button
Sometimes you want to grab the user's attention that this is a special button, like to submit a form. For important task, use the action button. You do that by putting the class action on the button.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="action">Click</button>
</li>
</ul>
</section>
Raised Action Button
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="action raised">Click</button>
</li>
</ul>
</section>
Centered Action Button
You can center an action button. You would do that in something like a sheet or other single purpose panel. To do so, just put the class centered on the action button.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="action centered">Click</button>
</li>
</ul>
</section>
FAB Button
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="fab">Click</button>
</li>
</ul>
</section>
FAB Button with Background Color
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="fab red">Click</button>
<button class="fab green">Click</button>
<button class="fab blue">Click</button>
</li>
</ul>
</section>
And, here's all the Android buttons in action:
See the Pen Android Buttons by Robert Biggs (@rbiggs) on CodePen.
And here are the Android buttons with a red theme:
See the Pen Android Buttons Red Theme by Robert Biggs (@rbiggs) on CodePen.
iOS Buttons
Buttons on iOS are much more subtle than Android ones. Generally buttons do not have a background color. Instead they are transparent. In most cases they do not have borders either, just text. For special purposes a button may have a border. In those cases they also have a border radius.
Navbars & Toolbars
By default all buttons in navbars and toolbars are of the plain type. That means they have no border or background color. Also, when you hover or tap them, they don't exhibit the background shadow effect. Instead they show a solid hover color along with the Material Design ripple effect. Even if you put a specific class on a button in a navbar or toolbar, it will be ignored.
<nav> <h1>The Title</h1> <button>Plain Button</button> </nav>
Plain Button
If you put a plain button anywhere in the section part of your app, it's going to appear without border, just plain text.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button>Plain Button</button>
</li>
</ul>
</section>
Raised Button
If you put a button with the Android class raised anywhere in the section part of your app, it's going to appear without border or background-shadow, just plain text. That's how iOS buttons look.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class='raised'>Plain Button</button>
</li>
</ul>
</section>
Raised Button with Background Color
If you put a button with the Android class raised and a background color class anywhere in the section part of your app, it's going to appear without border, background-shadow or background color, just plain text. That's how iOS buttons look.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="raised red">Click</button>
<button class="raised green">Click</button>
<button class="raised blue">Click</button>
</li>
</ul>
</section>
Action Button
If you put a button with class action in section tag of your app, it will appear with a border and transparent background. That's the expected look for these buttons on iOS.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="action">Click</button>
</li>
</ul>
</section>
Raised Action Button
If you put a button with class action and raised in section tag of your app, it will appear with a border and transparent background and no raised background shadow. That's the expected look for these buttons on iOS.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="action raised">Click</button>
</li>
</ul>
</section>
Centered Action Button
You can center an action button. You would do that in something like a sheet or other single purpose panel. Usually on iOS action buttons are centered. To do so, just put the class centered on the action button.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="action centered">Click</button>
</li>
</ul>
</section>
FAB Button
Actually, FAB (Floating Action Buttons) buttons don't exist as a type on iOS. So we make them look like typical icon buttons. That is, transparent with a rounded border.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="fab">Click</button>
</li>
</ul>
</section>
FAB Button with Background Color
Actually, FAB (Floating Action Buttons) buttons don't exist as a type on iOS. So we make them look like typical icon buttons. That is, transparent with a rounded border.
<nav>
<h1>The Title</h1>
</nav>
<section>
<ul class='list'>
<li>
<button class="fab red">Click</button>
<button class="fab green">Click</button>
<button class="fab blue">Click</button>
</li>
</ul>
</section>
See the Pen iOS Buttons by Robert Biggs (@rbiggs) on CodePen.
And here's the iOS buttons with the red theme:
See the Pen iOS Buttons Red Theme by Robert Biggs (@rbiggs) on CodePen.
Cross Platform Strategies
You building an app that you want to deploy for both Android and iOS. Sometimes you need to customize something just for Android or just for iOS. ChocolateChip-UI provides hooks for you to do that. When the app loads, it checks what theme you're using. For the Android theme it puts the class themeIsAndroid on the body tag. For iOS it puts themeIsiOS on the body tag. This is useful were you just have a very minor fix that you want to put directly in your app's stylesheet. This is also useful where you are defining a style object in a view. So, to target something for Android, just use the theme class first, and for iOS, the same:
/* Color for Android button: */
.themeIsAndroid .myButton {
color: red;
}
/* Color for iOS button: */
.themeIsiOS .myButton {
color: blue;
}