Advanced

Info Token

An InfoToken is a visual representation of the status of something.
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
5
);

Props

NameTypeDefaultDescription
moderequiredInfoTokenMode
sizerequiredInfoTokenSize
typerequiredInfoTokenType
classNamestring

Examples

Information
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Small} mode={InfoTokenMode.Filled} />
6
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Medium} mode={InfoTokenMode.Filled} />
7
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Large} mode={InfoTokenMode.Filled} />
8
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Small} mode={InfoTokenMode.Stroked} />
9
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Medium} mode={InfoTokenMode.Stroked} />
10
<InfoToken type={InfoTokenType.Information} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
11
</>
12
);
Success
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<InfoToken type={InfoTokenType.Success} size={InfoTokenSize.Small} mode={InfoTokenMode.Filled} />
6
<InfoToken type={InfoTokenType.Success} size={InfoTokenSize.Medium} mode={InfoTokenMode.Filled} />
7
<InfoToken type={InfoTokenType.Success} size={InfoTokenSize.Large} mode={InfoTokenMode.Filled} />
8
<InfoToken type={InfoTokenType.Success} size={InfoTokenSize.Small} mode={InfoTokenMode.Stroked} />
9
<InfoToken type={InfoTokenType.Success} size={InfoTokenSize.Medium} mode={InfoTokenMode.Stroked} />
10
<InfoToken type={InfoTokenType.Success} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
11
</>
12
);
Warning
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<InfoToken type={InfoTokenType.Warning} size={InfoTokenSize.Small} mode={InfoTokenMode.Filled} />
6
<InfoToken type={InfoTokenType.Warning} size={InfoTokenSize.Medium} mode={InfoTokenMode.Filled} />
7
<InfoToken type={InfoTokenType.Warning} size={InfoTokenSize.Large} mode={InfoTokenMode.Filled} />
8
<InfoToken type={InfoTokenType.Warning} size={InfoTokenSize.Small} mode={InfoTokenMode.Stroked} />
9
<InfoToken type={InfoTokenType.Warning} size={InfoTokenSize.Medium} mode={InfoTokenMode.Stroked} />
10
<InfoToken type={InfoTokenType.Warning} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
11
</>
12
);
Critical
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<InfoToken type={InfoTokenType.Critical} size={InfoTokenSize.Small} mode={InfoTokenMode.Filled} />
6
<InfoToken type={InfoTokenType.Critical} size={InfoTokenSize.Medium} mode={InfoTokenMode.Filled} />
7
<InfoToken type={InfoTokenType.Critical} size={InfoTokenSize.Large} mode={InfoTokenMode.Filled} />
8
<InfoToken type={InfoTokenType.Critical} size={InfoTokenSize.Small} mode={InfoTokenMode.Stroked} />
9
<InfoToken type={InfoTokenType.Critical} size={InfoTokenSize.Medium} mode={InfoTokenMode.Stroked} />
10
<InfoToken type={InfoTokenType.Critical} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
11
</>
12
);
Tip
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<InfoToken type={InfoTokenType.Tip} size={InfoTokenSize.Small} mode={InfoTokenMode.Filled} />
6
<InfoToken type={InfoTokenType.Tip} size={InfoTokenSize.Medium} mode={InfoTokenMode.Filled} />
7
<InfoToken type={InfoTokenType.Tip} size={InfoTokenSize.Large} mode={InfoTokenMode.Filled} />
8
<InfoToken type={InfoTokenType.Tip} size={InfoTokenSize.Small} mode={InfoTokenMode.Stroked} />
9
<InfoToken type={InfoTokenType.Tip} size={InfoTokenSize.Medium} mode={InfoTokenMode.Stroked} />
10
<InfoToken type={InfoTokenType.Tip} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
11
</>
12
);
Question
1
import {InfoToken, InfoTokenMode, InfoTokenSize, InfoTokenType} from '@coveord/plasma-react';
2
3
export default () => (
4
<>
5
<InfoToken type={InfoTokenType.Question} size={InfoTokenSize.Small} mode={InfoTokenMode.Filled} />
6
<InfoToken type={InfoTokenType.Question} size={InfoTokenSize.Medium} mode={InfoTokenMode.Filled} />
7
<InfoToken type={InfoTokenType.Question} size={InfoTokenSize.Large} mode={InfoTokenMode.Filled} />
8
<InfoToken type={InfoTokenType.Question} size={InfoTokenSize.Small} mode={InfoTokenMode.Stroked} />
9
<InfoToken type={InfoTokenType.Question} size={InfoTokenSize.Medium} mode={InfoTokenMode.Stroked} />
10
<InfoToken type={InfoTokenType.Question} size={InfoTokenSize.Large} mode={InfoTokenMode.Stroked} />
11
</>
12
);

No guidelines exist for InfoToken yet.

Create guidelines