mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-14 14:08:18 +00:00
194 lines
8.1 KiB
Plaintext
194 lines
8.1 KiB
Plaintext
|
# Button
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn">Button</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```html
|
||
|
|
<button type="button" class="btn">Primary</button>
|
||
|
|
<button type="button" class="btn-outline">Outline</button>
|
||
|
|
<button type="button" class="btn-sm-secondary">Small secondary</button>
|
||
|
|
<button type="button" class="btn-icon-outline" aria-label="Settings">
|
||
|
|
<svg class="lucide lucide-settings" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" /><circle cx="12" cy="12" r="3" /></svg>
|
||
|
|
</button>
|
||
|
|
```
|
||
|
|
|
||
|
|
Use exactly one `btn` class on a `<button>` or `<a>`. The class name combines size, icon shape, and variant:
|
||
|
|
|
||
|
|
| Pattern | Example | Use for |
|
||
|
|
| --- | --- | --- |
|
||
|
|
| `btn` | `btn` | Default-size primary button |
|
||
|
|
| `btn-{variant}` | `btn-outline` | Default-size button with a visual variant |
|
||
|
|
| `btn-{size}` | `btn-sm` | Sized primary button |
|
||
|
|
| `btn-{size}-{variant}` | `btn-sm-outline` | Sized button with a visual variant |
|
||
|
|
| `btn-icon` | `btn-icon` | Default-size icon-only primary button |
|
||
|
|
| `btn-icon-{variant}` | `btn-icon-outline` | Default-size icon-only button with a visual variant |
|
||
|
|
| `btn-{size}-icon` | `btn-sm-icon` | Sized icon-only primary button |
|
||
|
|
| `btn-{size}-icon-{variant}` | `btn-sm-icon-outline` | Sized icon-only button with a visual variant |
|
||
|
|
|
||
|
|
Do not stack button classes like `btn-sm btn-outline`. Use the composed class, such as `btn-sm-outline`.
|
||
|
|
|
||
|
|
### Variants
|
||
|
|
|
||
|
|
| Variant | Classes |
|
||
|
|
| --- | --- |
|
||
|
|
| Primary | `btn`, `btn-primary` |
|
||
|
|
| Secondary | `btn-secondary` |
|
||
|
|
| Outline | `btn-outline` |
|
||
|
|
| Ghost | `btn-ghost` |
|
||
|
|
| Link | `btn-link` |
|
||
|
|
| Destructive | `btn-destructive` |
|
||
|
|
|
||
|
|
Every variant can be combined with a size or icon shape. For example: `btn-xs-secondary`, `btn-lg-destructive`, `btn-icon-ghost`, `btn-sm-icon-outline`.
|
||
|
|
|
||
|
|
### Sizes
|
||
|
|
|
||
|
|
| Size | Text button | Icon-only button |
|
||
|
|
| --- | --- | --- |
|
||
|
|
| Extra small | `btn-xs` | `btn-xs-icon` |
|
||
|
|
| Small | `btn-sm` | `btn-sm-icon` |
|
||
|
|
| Default | `btn` | `btn-icon` |
|
||
|
|
| Large | `btn-lg` | `btn-lg-icon` |
|
||
|
|
|
||
|
|
Use icon-only classes only when the button has no visible text. Icon-only buttons must have an accessible name, usually with `aria-label`.
|
||
|
|
|
||
|
|
Mark inline icons with `data-icon="inline-start"` or `data-icon="inline-end"` when a text button should use icon-aware spacing.
|
||
|
|
|
||
|
|
To group related buttons, use the [Button Group](/components/button-group/) component.
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
### Size
|
||
|
|
|
||
|
|
Use size-specific classes to change the size of the button.
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<div class="flex flex-wrap items-center gap-2">
|
||
|
|
<button type="button" class="btn-xs">Extra Small</button>
|
||
|
|
<button type="button" class="btn-sm">Small</button>
|
||
|
|
<button type="button" class="btn">Default</button>
|
||
|
|
<button type="button" class="btn-lg">Large</button>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Default
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn">Button</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Outline
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-outline">Outline</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Secondary
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-secondary">Secondary</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Ghost
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-ghost">Ghost</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Destructive
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-destructive">Destructive</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Link
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-link">Link</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Icon
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn-icon-outline" aria-label="Open">
|
||
|
|
<svg class="lucide lucide-chevron-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m9 18 6-6-6-6" /></svg>
|
||
|
|
</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### With Icon
|
||
|
|
|
||
|
|
Mark inline icons with `data-icon="inline-start"` or `data-icon="inline-end"` when the button should use icon-aware spacing.
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn">
|
||
|
|
<svg data-icon="inline-start" class="lucide lucide-git-branch" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M15 6a9 9 0 0 0-9 9V3" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /></svg>
|
||
|
|
New Branch
|
||
|
|
</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Rounded
|
||
|
|
|
||
|
|
Use standard Tailwind classes to override the button radius.
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<button type="button" class="btn rounded-full">
|
||
|
|
<svg class="lucide lucide-arrow-up" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
|
||
|
|
Rounded
|
||
|
|
</button>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Spinner
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<div class="flex flex-wrap items-center gap-2">
|
||
|
|
<button type="button" class="btn" disabled>
|
||
|
|
<svg class="animate-spin lucide lucide-loader" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 2v4" /><path d="m16.2 7.8 2.9-2.9" /><path d="M18 12h4" /><path d="m16.2 16.2 2.9 2.9" /><path d="M12 18v4" /><path d="m4.9 19.1 2.9-2.9" /><path d="M2 12h4" /><path d="m4.9 4.9 2.9 2.9" /></svg>
|
||
|
|
Generating
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn-outline">
|
||
|
|
Downloading
|
||
|
|
<svg class="animate-spin lucide lucide-loader" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 2v4" /><path d="m16.2 7.8 2.9-2.9" /><path d="M18 12h4" /><path d="m16.2 16.2 2.9 2.9" /><path d="M12 18v4" /><path d="m4.9 19.1 2.9-2.9" /><path d="M2 12h4" /><path d="m4.9 4.9 2.9 2.9" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### Button Group
|
||
|
|
|
||
|
|
To group related buttons, use the [Button Group](/components/button-group/) component.
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<div class="flex w-fit items-stretch gap-2">
|
||
|
|
<div role="group" class="button-group">
|
||
|
|
<button type="button" class="btn-outline">Archive</button>
|
||
|
|
<button type="button" class="btn-outline">Report</button>
|
||
|
|
</div>
|
||
|
|
<div role="group" class="button-group">
|
||
|
|
<button type="button" class="btn-outline">Snooze</button>
|
||
|
|
<button type="button" class="btn-icon-outline" aria-label="More options">
|
||
|
|
<svg class="lucide lucide-ellipsis" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle cx="5" cy="12" r="1" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Preview>
|
||
|
|
|
||
|
|
### RTL
|
||
|
|
|
||
|
|
Add `dir="rtl"` to the button or an ancestor. Flip directional icons explicitly.
|
||
|
|
|
||
|
|
<Preview>
|
||
|
|
<div dir="rtl" class="flex flex-wrap items-center gap-2">
|
||
|
|
<button type="button" class="btn-outline">زر</button>
|
||
|
|
<button type="button" class="btn-destructive">حذف</button>
|
||
|
|
<button type="button" class="btn-outline">
|
||
|
|
إرسال
|
||
|
|
<svg data-icon="inline-end" class="rtl:rotate-180 lucide lucide-arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn-secondary" disabled>
|
||
|
|
<svg class="animate-spin lucide lucide-loader" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12 2v4" /><path d="m16.2 7.8 2.9-2.9" /><path d="M18 12h4" /><path d="m16.2 16.2 2.9 2.9" /><path d="M12 18v4" /><path d="m4.9 19.1 2.9-2.9" /><path d="M2 12h4" /><path d="m4.9 4.9 2.9 2.9" /></svg>
|
||
|
|
جاري التحميل
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</Preview>
|