Skip to main contentCarbon Design System

Tile

Preview the tile component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Feature flags

Feature flags have been added to the clickable, selectable, and expandable variants of tile to improve accessibility and changes its visual appearance, not its functionality. For more code-specific feature flag information, refer to the @carbon/react framework.

  • The
    enable-experimental-tile-contrast
    flag adds a border to the tile with improved contrast for accessibility and to visually indicate they are operable.
  • The
    enable-v12-tile-default-icons
    flag enables the rendering of default icons on the clickable variant of tile like the ArrowRight icon for navigation or Error icon when it is disabled if the user hasn’t configured a different icon already.
  • The
    enable-v12-tile-default-icons
    flag enables the rendering of default icons on the clickable variant of a tile, such as the ArrowRight icon for navigation or the Error icon when the tile is disabled. If the user hasn’t configured a different icon, these defaults will be used.
  • The
    enable-v12-tile-radio-icons
    flag changes RadioTile to use radio button icons instead of a checkmark icons.

Live demo



      This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.