Text Button
5.1.3
The Text Button component allows users to take actions, and make choices, with a single tap.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel | string | Aria label attribute for enhanced accessibility. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
customTranslations | DeepPartial | Custom translations |
endIcon | ReactNode | Icon to be displayed at the end of the button. |
id | string | A unique ID for the TextButton. |
isExternalLink | boolean | If the button opens external link. Will display an icon to the left and add screen reader info |
negativeMargins | boolean | Enables TextButton minus margin adjustments through boolean or individual side-specific object. |
startIcon | ReactNode | Icon to be displayed at the start of the button. |
npm install @sj-ab/component-library.ui.text-buttonSemantik
Text Button har samma semantik som våra andra knappar, till exempel Flow Button.
Understrykning eller ikon
Text Button visas alltid med en ikon eller med en understrykning . Detta gör det tydligt för alla användaren att knappen är klickbar i alla lägen.
Med ikon
Med understrykning
Understrykningen hanteras automatiskt i komponenten om utvecklaren inte skickar in en ikon.
Extern länk
Om Text Button används som en extern länk som öppnar en ny flik måste utvecklaren skicka med propen isExternalLink. Då kommer knappen automatiskt få en särskild ikon och en inbyggd uppläsning för skärmläsare som berättar att det är en extern länk.
Text Button med extern länk-ikon
- Enter / PiltangenterVälj ett datum i kalender
Importer av Text Button
Repos med Text Button
Senaste installerade version av Text Button
Äldsta installerade version av Text Button