# BadgeProps Source: /tuil/docs/reference/packages/ink/api/badge-props Locale: en interface exported by @mwillbanks/tuil-ink. {/* Generated by tooling/docs/generate-reference.ts. */} ## interface [#interface] Public interface exported by `@mwillbanks/tuil-ink`. ```ts export interface BadgeProps extends TextProps { readonly tone?: "neutral" | "success" | "warning" | "danger" | "info"; } ``` ## Members [#members] | Member | Type | Required | Description | Related types | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | `tone` | `"info" \| "success" \| "warning" \| "danger" \| "neutral" \| undefined` | No | The `tone` member uses the `"info" \| "success" \| "warning" \| "danger" \| "neutral" \| undefined` contract. | — | | `aria-label` | `string \| undefined` | No | A label for the element for screen readers. | — | | `aria-hidden` | `boolean \| undefined` | No | Hide the element from screen readers. | — | | `color` | `LiteralUnion \| undefined` | No | Change text color. Ink uses Chalk under the hood, so all its functionality is supported. | — | | `backgroundColor` | `LiteralUnion \| undefined` | No | Same as `color`, but for the background. | — | | `dimColor` | `boolean \| undefined` | No | Dim the color (make it less bright). | — | | `bold` | `boolean \| undefined` | No | Make the text bold. | — | | `italic` | `boolean \| undefined` | No | Make the text italic. | — | | `underline` | `boolean \| undefined` | No | Make the text underlined. | — | | `strikethrough` | `boolean \| undefined` | No | Make the text crossed out with a line. | — | | `inverse` | `boolean \| undefined` | No | Inverse background and foreground colors. | — | | `wrap` | `"wrap" \| "hard" \| "truncate-end" \| "truncate" \| "truncate-middle" \| "truncate-start" \| undefined` | No | This property tells Ink to wrap or truncate text if its width is larger than the container. If `wrap` is passed (the default), Ink will wrap text and split it into multiple lines. If `hard` is passed, Ink will fill each line to the full column width, breaking words as necessary. If `truncate-*` is passed, Ink will truncate text instead, resulting in one line of text with the rest cut off. | — | | `children` | `React.ReactNode` | No | The `children` member uses the `React.ReactNode` contract. | — | | `variant` | `string \| undefined` | No | The `variant` member uses the `string \| undefined` contract. | — | | `size` | `"sm" \| "md" \| "lg" \| undefined` | No | The `size` member uses the `"sm" \| "md" \| "lg" \| undefined` contract. | — | | `unstyled` | `boolean \| undefined` | No | The `unstyled` member uses the `boolean \| undefined` contract. | — | | `className` | `string \| undefined` | No | The `className` member uses the `string \| undefined` contract. | — | | `layout` | `Partial> \| undefined` | No | The `layout` member uses the `Partial> \| undefined` contract. | — | | `id` | `string \| undefined` | No | The `id` member uses the `string \| undefined` contract. | — | | `testId` | `string \| undefined` | No | The `testId` member uses the `string \| undefined` contract. | — | | `role` | `SemanticRole \| undefined` | No | The `role` member uses the `SemanticRole \| undefined` contract. | [`SemanticRole`](/tuil/docs/reference/packages/core/api/semantic-role) | | `label` | `string \| undefined` | No | The `label` member uses the `string \| undefined` contract. | — | | `description` | `string \| undefined` | No | The `description` member uses the `string \| undefined` contract. | — | | `disabled` | `boolean \| undefined` | No | The `disabled` member uses the `boolean \| undefined` contract. | — | | `readOnly` | `boolean \| undefined` | No | The `readOnly` member uses the `boolean \| undefined` contract. | — | | `selected` | `boolean \| undefined` | No | The `selected` member uses the `boolean \| undefined` contract. | — | | `checked` | `boolean \| undefined` | No | The `checked` member uses the `boolean \| undefined` contract. | — | | `expanded` | `boolean \| undefined` | No | The `expanded` member uses the `boolean \| undefined` contract. | — | | `valueText` | `string \| undefined` | No | The `valueText` member uses the `string \| undefined` contract. | — | | `slots` | `Partial> \| undefined` | No | The `slots` member uses the `Partial> \| undefined` contract. | [`SlotComponents`](/tuil/docs/reference/packages/theme/api/slot-components), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) | | `slotProps` | `Partial> \| undefined` | No | The `slotProps` member uses the `Partial> \| undefined` contract. | [`SlotProps`](/tuil/docs/reference/packages/theme/api/slot-props), [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) | ## Parameters [#parameters] This declaration has no public members. ## Returns [#returns] This declaration does not return a value. ## Throws [#throws] No thrown errors are documented for this declaration. ## Related types [#related-types] * [`TextProps`](/tuil/docs/reference/packages/ink/api/text-props) ## Source [#source] [View the secondary source reference](https://github.com/mwillbanks/tuil/blob/main/packages/ink/src/components.tsx) ## Package [#package] [@mwillbanks/tuil-ink](/tuil/docs/reference/packages/ink)