archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add some button examples

Browse Source
This commit is contained in:
Adam Wathan 2017-10-17 14:54:42 -04:00
parent c20af3484c
commit 3be4648d41
2 changed files with 116 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/source/_partials/code-sample.blade.php
View File

@ -1,5 +1,5 @@
<div class="border border-smoke rounded mask mb-4">
<div class="p-6 border-b border-smoke">
<div class="p-6 border-b border-smoke text-center">
{{ $slot }}
</div>
<div>

162
docs/source/styles/buttons.blade.md
View File

@ -5,59 +5,127 @@ title: "Buttons"
# Buttons
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
</div>
We don't ship any default button components because every app has it's own visual style and Tailwind tries to be as unopinionated as possible about how your project should look.
Document how to create buttons of various styles, like solid rounded buttons, outline buttons, pill buttons, etc.
That said, buttons are easy to build by combining utility classes.
### Solid
Here's a bunch of examples:
<div class="mb-4">
<button class="text-medium text-slate-darker rounded py-2 px-4 bg-white mr-4">
Save
### Simple
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
Button
</button>
@slot('code')
<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded">
Button
</button>
<!-- Extracting component classes: -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply&nbsp;.text-bold .py-2 .px-4 .rounded;
}
.btn-blue {
@apply&nbsp;.bg-blue .text-white;
}
.btn-blue:hover {
@apply&nbsp;.bg-blue-dark;
}
</style>
@endslot
@endcomponent
---
### Pill
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 rounded-pill">
Button
</button>
@endcomponent
---
### Outline
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-transparent hover:bg-blue text-blue-dark text-medium hover:text-white py-2 px-4 border border-blue hover:border-transparent rounded">
Button
</button>
@endcomponent
---
### Bordered
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border border-blue-darker rounded">
Button
</button>
@endcomponent
---
### Disabled
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-blue text-white text-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
Button
</button>
@endcomponent
---
### 3D
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-blue hover:bg-blue-dark text-white text-bold py-2 px-4 border-b-4 border-blue-dark hover:border-blue-darker rounded">
Button
</button>
@endcomponent
---
### Elevated
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-white hover:bg-smoke-lighter text-slate-dark text-medium py-2 px-4 border border-slate-lighter rounded shadow-1">
Button
</button>
@endcomponent
---
### Button Groups
@component('_partials.code-sample', ['lang' => 'html'])
<div class="inline-flex">
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-l">
Prev
</button>
<button class="text-medium text-slate-darker rounded py-2 px-4 bg-smoke-lighter mr-4">
Save
</button>
<button class="text-medium text-slate-darker rounded py-2 px-4 bg-smoke-light mr-4">
Save
</button>
</div>
<div class="mb-4">
<button class="text-medium text-white rounded py-2 px-4 bg-slate-darker mr-4">
Save
</button>
<button class="text-medium text-white rounded py-2 px-4 bg-slate-dark mr-4">
Save
</button>
<button class="text-medium text-white rounded py-2 px-4 bg-slate mr-4">
Save
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded-r">
Next
</button>
</div>
@endcomponent
@foreach($page->colors as $color)
<div class="mb-4">
<button class="text-medium text-white rounded py-2 px-4 bg-{{$color}} hover:bg-{{$color}}-dark mr-4">
Save
</button>
<button class="text-medium text-white rounded py-2 px-4 bg-{{$color}}-light mr-4">
Disabled
</button>
</div>
@endforeach
---
<h3 class="markdown">Outline</h3>
### w/Icon
@component('_partials.code-sample', ['lang' => 'html'])
<button class="bg-smoke hover:bg-smoke-dark text-slate-dark text-bold py-2 px-4 rounded inline-flex items-center">
<svg class="h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Download</span>
</button>
@endcomponent
@foreach($page->colors as $color)
<div class="mb-4">
<button class="text-medium text-white rounded py-2 px-4 text-{{$color}}-dark hover:text-white border border-{{$color}} hover:bg-{{$color}} mr-4">
Save
</button>
<button class="text-medium text-white rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
Disabled
</button>
</div>
@endforeach