Text Button

6.0.2

The Text 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

ariaLabel

stringAria label attribute for enhanced accessibility.

badgeColor

BadgeColorThe color of the badge.

badgeSize

"sm" | "md"The size of the badge.

color

"default" | "inverted"Determines the color scheme of the text button. - "default": Uses the standard color scheme. - "inverted": Inverts the color scheme, making the text light in light mode and dark in dark mode.

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

customTranslations

DeepPartialOverride default translations with custom text.

disabled

booleanIf true, the component is disabled.

endIcon

ReactNodeIcon to be displayed at the end of the button.

fullWidth

booleanIf true, the button will take up the full width of its container.

hasBadge

booleanIf true, the button will have a badge.

id

stringA unique ID for the TextButton.

isExternalLink

booleanIf the button opens external link. Will display an icon to the left and add screen reader info

negativeMargins

booleanEnables TextButton minus margin adjustments through boolean or individual side-specific object.

startIcon

ReactNodeIcon to be displayed at the start of the button.

Installation

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

Länkar

Tillgänglighet

Semantik

Text Button har samma semantik som våra andra knappar, till exempel Flow Button.

Se tillgänglighetsdokumentationen för 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.

Text button med ikon

Med ikon

Text button med understrykning

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 en ikon för extern länk

Text Button med extern länk-ikon

Tangentbordsinteraktioner

  • Enter / Piltangenter
    Välj ett datum i kalender

Change log

Statistik

  • Importer av Text Button

    258

  • Repos med Text Button

    69%

  • Senaste installerade version av Text Button

    6.0.1

  • Äldsta installerade version av Text Button