mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-10-28 00:56:10 +01:00
27dbcbf28d
Introduce tailwind as new frontend styling library to replace bulma in the longer run. Also create the first new ui library `ui-buttons` which will be the new standard for buttons ins SCM-Manager. In this library we reconsidered which types of buttons should be used to create a clean and consistent ui. Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
65 lines
1.9 KiB
Plaintext
65 lines
1.9 KiB
Plaintext
import { Meta } from "@storybook/addon-docs";
|
|
import { Button } from "../src";
|
|
|
|
<Meta title="Introduction"/>
|
|
|
|
# Buttons
|
|
|
|
The `@scm-manager/ui-buttons` library provides [atoms](https://atomicdesign.bradfrost.com/chapter-2/#atoms) implemented
|
|
as minimal wrappers around native html elements styled to match the general SCM-Manager aesthetic.
|
|
|
|
## Components
|
|
|
|
There are three actionable components available. Styling is consistent amongst them and all have the required `variant` property.
|
|
|
|
1. [Button](?path=/story/components--button)
|
|
2. [Link Button](?path=/story/components--link-button)
|
|
3. [External Link Button](?path=/story/components--external-link-button)
|
|
|
|
## Usage
|
|
|
|
Actionable components serve a dedicated purpose. It is therefore important to know when and how to use them.
|
|
|
|
### Variants
|
|
|
|
There are four variants available to each of the three button types, varying in importance.
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Emphasis</th>
|
|
<th>Button Variant</th>
|
|
<th>Usage Examples</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Very High</td>
|
|
<td><Button variant="signal" className="w-full">Signal</Button></td>
|
|
<td>Destructive actions</td>
|
|
</tr>
|
|
<tr>
|
|
<td>High</td>
|
|
<td><Button variant="primary" className="w-full">Primary</Button></td>
|
|
<td>Form submit</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Normal</td>
|
|
<td><Button variant="secondary" className="w-full">Secondary</Button></td>
|
|
<td>Cancel action in dialog</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Low</td>
|
|
<td><Button variant="tertiary" className="w-full">Tertiary</Button></td>
|
|
<td>Circumstantially relevant action on page with many actionable elements</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
## Content
|
|
|
|
Buttons exclusively contain text and no icons. Icons tend to be ambiguous and not always applicable which leads to inconsistent
|
|
and cluttered layouts.
|
|
|
|
Button text should be short, concise and describe the action performed.
|