ComponentsActions
Link
A link navigates to another page or resource and takes the theme's typography and colors. Choose a link when the result is a new location; when the result is an action on this page, use a button.
Links in running text
Inside a paragraph a link inherits the surrounding type. Link text should make sense on its own, without a nearby “click here”.
The reading room opens at nine. Members can reserve a desk from the booking buttons, browse the subject tags, or open the catalogue menu to find a title.
Small print also takes the surrounding size: opening hours and holiday closures.
Underline and typography
Every Underline value against the text-sized Typo values. The headings h1 to h3 behave like h4, only larger, so they are left out to keep the table readable.
| Typo ↓ · Underline → | None | Hover | Always |
|---|---|---|---|
| h4 | Opening hours | Opening hours | Opening hours |
| h5 | Opening hours | Opening hours | Opening hours |
| h6 | Opening hours | Opening hours | Opening hours |
| subtitle1 | Opening hours | Opening hours | Opening hours |
| subtitle2 | Opening hours | Opening hours | Opening hours |
| body1 | Opening hours | Opening hours | Opening hours |
| body2 | Opening hours | Opening hours | Opening hours |
| button | Opening hours | Opening hours | Opening hours |
| caption | Opening hours | Opening hours | Opening hours |
| overline | Opening hours | Opening hours | Opening hours |
| inherit | Opening hours | Opening hours | Opening hours |
Colors
Primary is the default. Pick a color for meaning only when the text also carries it; prefer Underline.Always when color is the only cue on a busy surface.
Icons and external links
StartIcon and EndIcon add a glyph without changing the accessible name. Links that open a new tab say so in their text and set rel.
Disabled links and actions
Disabled removes the link from use. For an action on the current page, a text button keeps keyboard and screen-reader behaviour correct.
Disabled
The winter timetable is published on 1 November.
Navigate with a link, act with a button
The button changes state on this page, so it is a button even though it looks quiet.Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudLink Href="components/link" Typo="Typo.body1">Find the harbour office</MudLink>