Flow Button
5.1.1
The Flow Button component allows users to take actions, and make choices, with a single tap.
| Namn | Typ | Beskrivning |
|---|---|---|
color | "critical" |
"black" |
"blue" |
"green" |
"grey" |
"orange" |
"white" | Color of the button |
colorVariant | "primary" |
"secondary" | Variant of the button |
elevated | boolean | Elevated button state to add dimension to otherwise flat layout |
sx | SxProps | The system prop that allows defining system overrides as well as additional CSS styles. |
npm install @sj-ab/component-library.ui.flow-buttonSemantik
Som standard visas FlowButton som en <button type="button">. Detta passar bra när knappen utför en handling på samma sida, som att öppna en modal.
Om FlowButton får ett href eller to-prop så kommer den automatiskt presenteras som en länk istället : <a href="/lankens-adress">. FlowButton ska alltid vara en länk när den navigerar användaren till en annan sida, antingen internt på sajten eller till en extern sajt.
Knapptext
Varje Flow Button behöver en tydlig etikett som gör det enkelt för användaren att förstå vad som händer när de klickar på knappen.
Texten ska vara konkret och kortfattad, till exempel "Gå till kassan" eller "Sök avgångar".
Det går att skriva över den synliga knapptexten specifikt för skärmläsare med propen aria-label, men detta får enbart göras i undantagsfall när det är extra viktigt att förtydliga funktionen. I de allra flesta fall duger den synliga texten.
- EnterAktivera länk eller knapp
- MellanslagAktivera knapp
Importer av Flow Button
Repos med Flow Button
Senaste installerade version av Flow Button
Äldsta installerade version av Flow Button