TextIconSpacingProps

Hierarchy

TextIconSpacingProps

Index

Properties

Optional aboveClassName

aboveClassName?: string

The class name to use for an icon that is placed before above the text. This is used when the stacked prop is enabled and the iconAfter prop is disabled or omitted.

Optional afterClassName

afterClassName?: string

The class name to use for an icon that is placed after text.

Optional beforeClassName

beforeClassName?: string

The class name to use for an icon that is placed before text.

Optional belowClassName

belowClassName?: string

The class name to use for an icon that is placed before above the text. This is used when the stacked prop is enabled and the iconAfter prop is enabled.

Optional children

children?: ReactNode

The children to render before or after the provided icon. This is defaulted to null so that providing a null icon will correctly render without React crashing.

Optional className

className?: string

An optional className to apply to the surrounding <span> when the forceIconWrap prop is enabled or the icon is not a valid React Element. If the forceIconWrap prop is not enabled, it will be cloned into the icon instead.

Optional flexReverse

flexReverse?: boolean

Boolean if the icon and content are in a column-reverse or row-reverse flex-direction. This will swap the different classnames as needed.

remarks: @since 2.5.0

Optional forceIconWrap

forceIconWrap?: boolean

Boolean if the icon should be forced into a <span> with the class names applied instead of attempting to clone into the provided icon.

Optional icon

icon?: ReactNode | ReactElement<any, string | JSXElementConstructor<any>>

An optional icon to display with a text button. This is invalid for icon buttons. If this is a single element, a new class name will be cloned into the element to get correct spacing so if you have a custom icon element, you must also pass that class name down. If you are using one of the react-md icon component packages, this is handled automatically.

If this is not a valid react element, the icon will be wrapped in a <span> instead with the class names applied.

Optional iconAfter

iconAfter?: boolean

Boolean if the icon should appear after the text instead of before.

Optional stacked

stacked?: boolean

Boolean if the icon and text should be stacked instead of inline. Note: You'll normally want to update the container element to have display: flex and flex-direction: column for this to work.