mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-10-31 10:35:56 +01:00
4b92959b9c
After many days invested in making tailwind work in the SCM-Manager environment as well as a long discussion last week, we have decided not to move further with tailwind, but still keep adding new, independent modules for frontend components. Tailwind simply overcomplicated our build pipeline because bulma was already part of the api and the two were incompatible on several occasions. Styling will continue to be guided by bulma and all parts related to tailwind are removed. We therefore continue the trend of focusing on improving our existing stack rather than adding further complexity.
65 lines
1.8 KiB
Plaintext
65 lines
1.8 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">Signal</Button></td>
|
|
<td>Destructive actions</td>
|
|
</tr>
|
|
<tr>
|
|
<td>High</td>
|
|
<td><Button variant="primary">Primary</Button></td>
|
|
<td>Form submit</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Normal</td>
|
|
<td><Button variant="secondary">Secondary</Button></td>
|
|
<td>Cancel action in dialog</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Low</td>
|
|
<td><Button variant="tertiary">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.
|