Components
Warning text
Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.
See the GOV.UK Design System documentation on warning text for more information on when to use this component.
Warning You can be fined up to £5,000 if you do not register
<gv-warning-text>
You can be fined up to £5,000 if you do not register
</gv-warning-text>Icon fallback text
This component includes visually hidden text at the start to provide context to screen reader users who may not be able to see the icon.
The default is 'Warning', but you can change it with the iconFallbackText prop - for example, for localisation:
Rhybudd Gallwch gael dirwy o hyd at £5,000 os na fyddwch yn cofrestru.
<gv-warning-text icon-fallback-text="Rhybudd">
Gallwch gael dirwy o hyd at £5,000 os na fyddwch yn cofrestru.
</gv-warning-text>Props
| Name | Type | Description |
|---|---|---|
| text | string | Text to use within the warning text component. If content is provided in the default slot, this prop will be ignored. |
| iconFallbackText | string | The fallback text for the icon, used by screen readers and other assistive technologies. Defaults to 'Warning'. |
Slots
| Name | Description |
|---|---|
| default | HTML to use within the warning text component. If content is provided in this slot, the text prop will be ignored. |