Text Button

5.5.5

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)

Namn	Typ	Beskrivning
ariaLabel	`string`	Aria label attribute for enhanced accessibility.
badgeColor	`BadgeColor`	The 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	`DeepPartial`	Override default translations with custom text.
disabled	`boolean`	If true, the component is disabled.
endIcon	`ReactNode`	Icon to be displayed at the end of the button.
fullWidth	`boolean`	If true, the button will take up the full width of its container.
hasBadge	`boolean`	If true, the button will have a badge.
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.

Installation

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.

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.