Icon Button
5.3.3
The Icon Button component allows users to take actions, and make choices, with a single tap.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaLabel * | string | Provides a screen reader name for the button. Required for WCAG 2.1 compliance. |
badgeColor | BadgeColor | The color of the badge. |
badgeSize | "sm" |
"md" | The size of the badge. |
color | "black" |
"blue" |
"green" |
"grey" |
"transparent" |
"white" | The color of the button. |
customAttribute | { attribute: string; value: string |
number } | Custom attribute for testing purposes. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disabled | boolean | If true, the component is disabled. |
hasBadge | boolean | If true, the button will have a badge. |
id | string | A unique ID for the button. |
innerRef | Ref | Ref to the inner MuiIconButton element. |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
LinkComponent | ElementType | The component used to render a link when the href prop is provided. |
size | "small" |
"medium" |
"large" | The size of the button, affecting its padding. |
skeletonSx | SxProps | Custom styles for the skeleton component. |
npm install @sj-ab/component-library.ui.icon-buttonIkon eller textknapp?
Var försiktig med i vilka situationer du väljer att använda Icon Button. Det är inte självklart för alla användare vad en viss ikon betyder. En knapp med text är alltid tydligare.
Icon Button utan text
Text Button med ikon och text.
Semantik
Som standard visas Icon Button som en <button type="button">. Detta passar bra när knappen utför en handling på samma sida, som att öppna en modal.
Om IconButton får ett href eller to-prop så kommer den automatiskt presenteras som en länk istället : <a href="/lankens-adress">. IconButton 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.
Klickytor
Det är viktigt att Icon Button är stor nog för att alla användare ska kunna klicka eller trycka på den.
Komponenten har därför en inbyggd minsta klickyta på 48px x 48px som aldrig kan underskridas. Detta gäller även när knappen visas i version small eller medium. Klickytan går då utanför den synliga knappens yta.
Klickytan går utanför Icon Button för att säkerställa att den är tillräckligt stor.
Placera aldrig en Icon Button direkt intill ett annat klickbart element så att klickytorna överlappar.
Tillgängligt namn
Icon Button har ingen synlig etikett. Det är därför obligatoriskt att skicka med en prop ariaLabel för att ge knappen ett tillgängligt namn som kan läsas upp av skärmläsare.
Texten i ariaLabel ska vara konkret och kortfattad, till exempel "Hjälp" eller "Meny".
- EnterAktivera länk eller knapp