mirror of
https://github.com/goauthentik/authentik
synced 2026-04-25 17:15:26 +02:00
54 lines
1.4 KiB
Plaintext
54 lines
1.4 KiB
Plaintext
import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";
|
|
|
|
import * as LabelStories from "./Label.stories";
|
|
|
|
<Meta of={LabelStories} />
|
|
|
|
# Labels
|
|
|
|
Labels are in-page elements that provide pointers or guidance. Frequently called "chips" in other
|
|
design systems. Labels are used alongside other elements to warn users of conditions or status that
|
|
they might want to be aware of
|
|
|
|
## Usage
|
|
|
|
```Typescript
|
|
import "#elements/Label";
|
|
```
|
|
|
|
Note that the content of a label _must_ be a valid HTML component; plain text does not work here. The
|
|
default label is informational:
|
|
|
|
```html
|
|
<ak-label><p>This is the content of your alert!</p></ak-label>
|
|
```
|
|
|
|
## Demo
|
|
|
|
### Default: Info
|
|
|
|
The default state of an alert is _info_.
|
|
|
|
<Story of={LabelStories.DefaultStory} />
|
|
|
|
### Warning
|
|
|
|
The icon can be changed via the `icon` attribute. It takes the name of a valid `fas`-class Font
|
|
Awesome icon. Changing the icon can be helpful, as not everyone can see the color changes. It has
|
|
also been set "compact" to show the difference.
|
|
|
|
<Story of={LabelStories.CompactWarningLabel} />
|
|
|
|
### Success
|
|
|
|
This label is illustrated using the PFColor enum, rather than the attribute name. Note that the content
|
|
is _slotted_, and can be styled.
|
|
|
|
<Story of={LabelStories.SuccessLabel} />
|
|
|
|
### Danger
|
|
|
|
This label is illustrated using the PFColor enum, rather than the attribute name.
|
|
|
|
<Story of={LabelStories.DangerLabel} />
|