Flow Button

5.1.0

The Flow Button component allows users to take actions, and make choices, with a single tap.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)
NamnTypBeskrivning

color

"critical" | "black" | "blue" | "green" | "grey" | "orange" | "white"Color of the button

colorVariant

"primary" | "secondary"Variant of the button

elevated

booleanElevated button state to add dimension to otherwise flat layout

sx

SxPropsThe system prop that allows defining system overrides as well as additional CSS styles.

Installation

npm install @sj-ab/component-library.ui.flow-button

Länkar

Tillgänglighet

Semantik

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.

Tangentbordsinteraktioner

  • Enter
    Aktivera länk eller knapp
  • Mellanslag
    Aktivera knapp

Change log

Statistik

  • Importer av Flow Button

    425

  • Repos med Flow Button

    95%

  • Senaste installerade version av Flow Button

    5.1.0

  • Äldsta installerade version av Flow Button

    1.0.32