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".

Tangentbordsinteraktioner

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

Change log

Statistik

  • Importer av Flow Button

    413
  • Repos med Flow Button

    95%
  • Senaste installerade version av Flow Button

    5.1.0
  • Äldsta installerade version av Flow Button

    1.0.32