Feedback

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

Loading...

<Feedback>Here's some feedback</Feedback>

<Feedback>Here's some feedback</Feedback>

Introduction

import { Feedback } from '@telus-uds/components-base'

A feedback box commonly used with form fields. While its primary use is to facilitate feedback states for other form components such as TextInput, you may use it standalone.

Guidance

Complex content

You may pass any React tree as the children of this component, bear in mind that a render function is better suited for styling children based on Feedback's variant.

Loading...

<Feedback title="Instructions"> <Typography>Provide a brief description of your issue</Typography> </Feedback>

<Feedback title="Instructions">
  <Typography>Provide a brief description of your issue</Typography>
</Feedback>

Using a render function

When a function is passed for rendering content, it will receive the feedback text styles and variant as arguments.

Loading...

<Feedback title="Feedback" validation="success" variant={{ icon: true }}> {({ variant, textStyles }) => ( <span style={textStyles}>The variant of this feedback is {Object.keys(variant).join(',')}</span> )} </Feedback>

<Feedback title="Feedback" validation="success" variant={{ icon: true }}>
  {({ variant, textStyles }) => (
    <span style={textStyles}>The variant of this feedback is {Object.keys(variant).join(',')}</span>
  )}
</Feedback>

Appearance

This component's appearance may change based on the validation prop.

Loading...

<Feedback validation="success">Everything went great!</Feedback>

<Feedback validation="success">Everything went great!</Feedback>

Loading...

<Feedback validation="error">Something went wrong...</Feedback>

<Feedback validation="error">Something went wrong...</Feedback>

Accessibility

All accessibility props set on this component will be applied to the outer container. By default using validation="error" will set the feedback's role to "alert".

Props

Name	Type	Default	Description
title	string		Emphasized summary of the feedback. If an icon is set, it is rendered next to the title.
children	union		Feedback content rendered below the title. A render function `({textStyles, variant}) => {}` is supported.
validation	'error' | 'success'		Use to visually mark the Feedback as valid or invalid.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details