Flow Button
5.3.0
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-buttonSom 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.
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.